Clerk Demo App

Suspending Parent Components

This demonstrates what happens when a Clerk component (UserButton) is wrapped inside a client component that suspends using React's use() hook. The entire subtree is blocked from rendering until the suspense resolves.

What to Watch For

• The component suspends for 5 seconds with a loading fallback
• The UserButton won't appear until the suspense resolves
• This is fundamentally different from independent hook hydration
• The entire component tree is blocked when a parent suspends

Clerk Component Inside Suspending Parent

The parent component uses React 19's use() hook to suspend for 5 seconds. Watch how the UserButton is blocked from rendering until the parent resolves.

Client component is suspending... UserButton is blocked from rendering...

Important Pattern Note

• The UserButton won't render until the parent component resolves its suspense
• This is different from independent hook hydration where components become interactive immediately
• Use this pattern carefully - suspending parent components will delay all children
• ClerkProvider itself doesn't suspend, but components using use() can block Clerk UI components

Key Takeaways

Parent components using use() block all children from rendering
Clerk components like UserButton are affected by suspending parents
This demonstrates why placement of Suspense boundaries matters
In production, wrap only the slow parts, not your auth UI

← Previous: Independent Hook Hydration Back to Overview

Back to Partial Hydration

Suspending Parent Components

What to Watch For

• The component suspends for 5 seconds with a loading fallback
• The UserButton won't appear until the suspense resolves
• This is fundamentally different from independent hook hydration
• The entire component tree is blocked when a parent suspends

Clerk Component Inside Suspending Parent

The parent component uses React 19's use() hook to suspend for 5 seconds. Watch how the UserButton is blocked from rendering until the parent resolves.

Suspense Resolved

Client Component That Suspended for 5000ms

This component used React's use() hook to suspend for 5 seconds. The Clerk component below was blocked from rendering until this suspense resolved.

Clerk Component (rendered after suspense):

Client component is suspending... UserButton is blocked from rendering...

Important Pattern Note

• The UserButton won't render until the parent component resolves its suspense
• This is different from independent hook hydration where components become interactive immediately
• Use this pattern carefully - suspending parent components will delay all children
• ClerkProvider itself doesn't suspend, but components using use() can block Clerk UI components

Key Takeaways

Parent components using use() block all children from rendering
Clerk components like UserButton are affected by suspending parents
This demonstrates why placement of Suspense boundaries matters
In production, wrap only the slow parts, not your auth UI

← Previous: Independent Hook Hydration Back to Overview