Skip to content

Add Suspense support for useFlag loading - #687

Merged
roncohen merged 9 commits into
mainfrom
react-useflag-suspense
Aug 4, 2026
Merged

roncohen merged 9 commits into
mainfrom
react-useflag-suspense

Conversation

@roncohen

@roncohen roncohen commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Adds Suspense support to useFlag in @reflag/react-sdk.

Users can now opt into Suspense loading behavior either at the provider level:

<ReflagProvider suspense>
  <Suspense fallback={<Loading />}>
    <App />
  </Suspense>
</ReflagProvider>

or per hook call:

  useFlag("huddle", { suspense: true });

When enabled, useFlag throws a loading promise while isLoading is true, allowing the nearest React boundary to render its fallback until flags finish loading.

@roncohen
roncohen marked this pull request as ready for review August 3, 2026 17:19

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Not ready to approve

The current Suspense promise can hang indefinitely on initialization failures, and the new hook-level override behavior is not covered by tests/documentation precisely enough.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

Adds React Suspense-based loading support to @reflag/react-sdk’s useFlag, allowing consumers to opt into Suspense either via provider props or per-hook options so loading UI can be controlled by the nearest <Suspense> boundary.

Changes:

  • Adds suspense support to providers and useFlag/useFeature, including a provider-managed loading promise used for Suspense.
  • Introduces UseFlagOptions with a per-hook suspense override that can opt in/out relative to provider defaults.
  • Documents Suspense usage and adds a new test for provider-level Suspense behavior.
File summaries
File Description
packages/react-sdk/src/index.tsx Implements provider-level and per-hook Suspense behavior for useFlag, including loading promise management.
packages/react-sdk/test/usage.test.tsx Adds a Suspense test verifying fallback rendering while flags are loading.
packages/react-sdk/README.md Documents the new suspense option and provides a Suspense usage example.
.changeset/green-flowers-suspend.md Declares a minor release for the new Suspense support.
Review details
  • Files reviewed: 4/4 changed files
  • Comments generated: 3
  • Review effort level: Lite

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

Comment thread packages/react-sdk/src/index.tsx
Comment thread packages/react-sdk/src/index.tsx
Comment thread packages/react-sdk/README.md Outdated
@roncohen
roncohen added this pull request to the merge queue Aug 4, 2026
@roncohen
roncohen removed this pull request from the merge queue due to a manual request Aug 4, 2026
@roncohen
roncohen added this pull request to the merge queue Aug 4, 2026
Merged via the queue into main with commit 6da4faf Aug 4, 2026
7 checks passed
@roncohen
roncohen deleted the react-useflag-suspense branch August 4, 2026 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants