Skip to content

feat(react): support fallback callbacks in Suspense.with - #1954

Open
KimHyeongRae0 wants to merge 2 commits into
toss:mainfrom
KimHyeongRae0:fix/1799-suspense-with-fallback-callback
Open

feat(react): support fallback callbacks in Suspense.with#1954
KimHyeongRae0 wants to merge 2 commits into
toss:mainfrom
KimHyeongRae0:fix/1799-suspense-with-fallback-callback

Conversation

@KimHyeongRae0

Copy link
Copy Markdown

Overview

Closes #1799.

Suspense.with already receives the wrapped component props when rendering the component, but its fallback option could only be a static React node.

This PR allows fallback to be a function in Suspense.with, so it can render fallback UI from the same props.

AS-IS

Suspense.with(
  {
    fallback: <Fallback />,
  },
  Component
)

The fallback could not use props passed to Component.

TO-BE

Suspense.with(
  {
    fallback: props => <Fallback {...props} />,
  },
  Component
)

The callback form is only supported by Suspense.with. The regular <Suspense /> props are kept as-is.

Changes

  • Add a Suspense.with-specific fallback type
  • Resolve function fallbacks before rendering <Suspense />
  • Add a test for prop-based fallback rendering
  • Add a changeset for @suspensive/react

Test plan

  • pnpm --filter @suspensive/react ci:test -- src/Suspense.spec.tsx
  • pnpm --filter @suspensive/react ci:type
  • pnpm --filter @suspensive/react ci:eslint
  • pnpm exec oxfmt --check packages/react/src/Suspense.tsx packages/react/src/Suspense.spec.tsx .changeset/suspense-with-fallback-callback.md

PR Checklist

  • I did below actions if need
  1. I read the Contributing Guide
  2. I added documents and tests.

@changeset-bot

changeset-bot Bot commented Apr 26, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: fd3566e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@suspensive/react Patch
@suspensive/react-query Patch
@suspensive/react-query-4 Patch
@suspensive/react-query-5 Patch
@suspensive/jotai Patch
@suspensive/codemods Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coauthors

coauthors Bot commented Apr 26, 2026

Copy link
Copy Markdown

People can be co-author:

Candidate Reasons Count Add this as commit message
@KimHyeongRae0 #1954 1 Co-authored-by: KimHyeongRae0 <42205606+KimHyeongRae0@users.noreply.github.com>
@codecov-commenter #1954 (comment) 1 Co-authored-by: codecov-commenter <65553080+codecov-commenter@users.noreply.github.com>

@vercel

vercel Bot commented Apr 26, 2026

Copy link
Copy Markdown
Contributor

@KimHyeongRae0 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

@KimHyeongRae0
KimHyeongRae0 marked this pull request as ready for review May 2, 2026 12:58
@codecov-commenter

codecov-commenter commented May 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.25%. Comparing base (818554b) to head (fd3566e).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1954      +/-   ##
==========================================
+ Coverage   93.22%   93.25%   +0.03%     
==========================================
  Files          42       42              
  Lines         664      667       +3     
  Branches      163      165       +2     
==========================================
+ Hits          619      622       +3     
  Misses         42       42              
  Partials        3        3              
Components Coverage Δ
@suspensive/react 100.00% <100.00%> (ø)
@suspensive/react-query 95.83% <ø> (ø)
@suspensive/react-query-4 100.00% <ø> (ø)
@suspensive/react-query-5 100.00% <ø> (ø)
@suspensive/jotai 100.00% <ø> (ø)
@suspensive/codemods 81.60% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Suspense.with with fallback callback prop

3 participants