Skip to content

feat(core): support React 19 browser() in BrowserOnly - #12443

Closed
sanjaiyan-dev wants to merge 2 commits into
facebook:mainfrom
sanjaiyan-dev:sanjaiyan-browser-only-react19.3
Closed

sanjaiyan-dev wants to merge 2 commits into
facebook:mainfrom
sanjaiyan-dev:sanjaiyan-browser-only-react19.3

Conversation

@sanjaiyan-dev

Copy link
Copy Markdown
Contributor

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This PR updates BrowserOnly to support React 19's new use(browser()) API while keeping full backward compatibility with React 18.

Why this is needed:

  • Prevents unnecessary re-renders: The old useEffect implementation always forces a double-render cycle on the client after initial mount.
  • Improves CLS (Cumulative Layout Shift): In React 19, browser() gracefully bails out during SSR to a native <Suspense> fallback, eliminating visual flicker and layout shifts during hydration.
  • Zero breaking changes: The component API (BrowserOnlyProps) remains exactly the same.
  • Full backward compatibility: Automatically detects React 18 environments and falls back to the legacy useEffect behavior.

Extremely sorry if I made any mistakes

@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Sep 11, 2026
@netlify

netlify Bot commented Sep 11, 2026 •

Copy link
Copy Markdown

✅ [V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit f8c5274
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6aa43bb2ff6f6f00083ae026
😎 Deploy Preview https://deploy-preview-12443--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@SapanMozammel SapanMozammel left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Great integration with React 19.3+ browser() API and Suspense bailout handling! Clean fallback for legacy React versions as well.

@slorber

slorber commented Sep 25, 2026

Copy link
Copy Markdown
Collaborator

Closing in favor of #12496

@slorber slorber closed this Sep 25, 2026
slorber added a commit that referenced this pull request Sep 25, 2026
…assisted)

Use `use(browser())` inside a `<Suspense>` boundary instead of the
`useIsBrowser()` context: React now skips the children during SSR and
renders them on the client after hydration.

The `<BrowserOnly>` fallback is now also displayed while children
suspend, instead of propagating to the parent Suspense boundary.

Supersedes #12443

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@sanjaiyan-dev
sanjaiyan-dev deleted the sanjaiyan-browser-only-react19.3 branch September 25, 2026 14:25
slorber added a commit that referenced this pull request Sep 25, 2026
…assisted)

Use `use(browser())` inside a `<Suspense>` boundary instead of the
`useIsBrowser()` context: React now skips the children during SSR and
renders them on the client after hydration.

The `<BrowserOnly>` fallback is now also displayed while children
suspend, instead of propagating to the parent Suspense boundary.

Supersedes #12443

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
slorber added a commit that referenced this pull request Sep 25, 2026
…assisted)

Use `use(browser())` inside a `<Suspense>` boundary instead of the
`useIsBrowser()` context: React now skips the children during SSR and
renders them on the client after hydration.

The `<BrowserOnly>` fallback is now also displayed while children
suspend, instead of propagating to the parent Suspense boundary.

Supersedes #12443

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants