Skip to content

Lazy components suspend during hydration if a context provider in a parent route re-renders #6767

@iansan5653

Description

@iansan5653

Which project does this relate to?

Router

Describe the bug

Lazy components (defined with React.lazy) should render during SSR and then defer hydration for their subtree on the client (until the lazy import resolves). This usually happens correctly, however, if a parent route provides a context provider that re-renders before the lazy import resolves, the deferred hydration is abandoned and the lazy component suspends until resolved. This creates a flicker where top-level lazy components go from rendered UI to suspense fallback back to rendered UI on page load.

This issue only reproduces if the following conditions are met:

  1. The lazy component must be defined with React.lazy and be initially visible to render during SSR
  2. The parent component that re-renders must be a context provider
  3. The parent context provider must be rendered by a parent route, not the same route as the lazy component
  4. The parent context provider must re-render before the lazy component renders

Your Example Website or App

https://github.com/iansan5653/react-lazy-hydrate-issue-tss.git

Steps to Reproduce the Bug or Issue

  1. Clone the repo and npm install
  2. Run npm run dev
  3. Observe that the fallback UI ("Loading...") is visible. Also observe the browser console logs showing that the fallback was rendered

To demonstrate expected behavior:

  1. Try deleting the RerenderingProvider from the root route, or simply commenting out the rerender effect
  2. Hard reload the page
  3. Observe that the fallback UI does not render

Expected behavior

The lazy component UI should render during SSR, then remain stable (without suspending) until the deferred hydration completes.

Screenshots or Videos

Screencap of demo (note that the lazy import is artificially slowed down for demo purposes):

Screen.Recording.2026-02-25.at.1.57.38.PM.mov

Console logs, indicating the render/fallback lifecycle (note StrictMode is enabled, causing extra renders):

logs showing that the context provider renders many times, then the lazy component fallback renders, and finally the lazy component contents render

Platform

  • Router / Start Version: 1.132.0
  • OS: macOS
  • Browser: Chrome
  • Browser Version: 145.0.7632.110
  • Bundler: vite
  • Bundler Version: 7.1.7

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions