React 19 SSR Suspense Behavior

Interactive demos showing what causes React to break Suspense boundaries during hydration and how React Compiler fixes these issues automatically.

Components that DON'T trigger Suspense fallbacks

These patterns maintain server-rendered content during hydration, preventing performance-degrading fallbacks.

No Fallback

No Suspense Fallback On Correctly Wrapped Async Transition

Async operations with nested startTransition

View Demo
No Fallback

No Suspense Fallback On Deferred Value With Memo

useDeferredValue with React.memo optimization

View Demo
No Fallback

No Suspense Fallback On Same Reducer Value

Same-value useReducer updates (React optimization)

View Demo
No Fallback

No Suspense Fallback On Same State Value

Same-value useState updates (React optimization)

View Demo
No Fallback

No Suspense Fallback On Transition Update

useState with startTransition wrapper

View Demo
No Fallback

No Suspense On Deferred Value With Memo

useDeferredValue with React.memo optimization

View Demo

Components that DO trigger Suspense fallbacks

These patterns cause React to discard server-rendered content and show loading spinners, hurting performance.

Triggers Fallback

Suspense Fallback On Async State After Await

State updates after await (loses transition context)

View Demo
Triggers Fallback

Suspense Fallback On Correctly Wrapped Async Use Transition

Async operations with useTransition hook

View Demo
Triggers Fallback

Suspense Fallback On Deferred Value

useDeferredValue without memoization

View Demo
Triggers Fallback

Suspense Fallback On External Store

useSyncExternalStore (cannot benefit from transitions)

View Demo
Triggers Fallback

Suspense Fallback On Is Pending Render

Rendering isPending state breaks optimization

View Demo
Triggers Fallback

Suspense Fallback On Reducer Change

Regular useReducer updates without transitions

View Demo
Triggers Fallback

Suspense Fallback On State Change

Regular useState updates without transitions

View Demo
Triggers Fallback

Suspense Fallback On Use Transition Update

useState with useTransition hook (problematic)

View Demo

React Compiler - Automatic Optimization

React Compiler's automatic memoization prevents ALL Suspense fallbacks

React Compiler

React Compiler Async State After Await

State updates after await (loses transition context) (with React Compiler)

View Demo
React Compiler

React Compiler Correctly Wrapped Async Use Transition

Async operations with useTransition hook (with React Compiler)

View Demo
React Compiler

React Compiler Deferred Value

useDeferredValue without memoization (with React Compiler)

View Demo
React Compiler

React Compiler External Store

useSyncExternalStore (cannot benefit from transitions) (with React Compiler)

View Demo
React Compiler

React Compiler Is Pending Render

Rendering isPending state breaks optimization (with React Compiler)

View Demo
React Compiler

React Compiler Reducer Change

Regular useReducer updates without transitions (with React Compiler)

View Demo
React Compiler

React Compiler State Change

Regular useState updates without transitions (with React Compiler)

View Demo
React Compiler

React Compiler Use Transition Update

useState with useTransition hook (problematic) (with React Compiler)

View Demo