Demo

Client Context

Client Context shares state across Client Components while preserving Server Component composition.
Context providers must be Client Components (marked with 'use client').
Pass Server Components as children through Client Component providers to keep server rendering.
Context values update all consuming Client Components without re-rendering Server Components.
This pattern enables shared state like themes, user preferences, or shopping carts.
Place providers high in the tree but as low as practical to limit re-renders.

app/providers.tsx

1'use client';
2
3import { createContext, useContext, useState } from 'react';
4
5const CounterContext = createContext<{
6  count: number;
7  increment: () => void;
8} | null>(null);
9
10export function CounterProvider({ children }: { children: React.ReactNode }) {
11  const [count, setCount] = useState(0);
12
13  return (
14    <CounterContext.Provider
15      value={{ count, increment: () => setCount((c) => c + 1) }}
16    >
17      {/* Server Components can be passed as children */}
18      // !mark
19      {children}
20    </CounterContext.Provider>
21  );
22}
23
24export function useCounter() {
25  const context = useContext(CounterContext);
26  if (!context)
27    throw new Error('useCounter must be used within CounterProvider');
28  return context;
29}

Server and Client Boundary

Component Type	Can Use Context	Can Import Server Components
Server Component	No	Yes
Client Component	Yes	No (use children pattern)
Client Provider	Yes	Via children prop

Demo

Increment the counter and navigate between categories.
Verify state persists while server-rendered content updates.
Refresh the page to see the counter reset to initial state.

Visual Summary

Client provider with server children

Client Provider

Server Content

Client Consumers

Pass Server Components as children to keep data fetching on the server.

Key Takeaways

Topic	Guidance
Composition	Client providers can wrap Server Components via children
State	Shared client state persists across navigation
Performance	Server data fetching stays on the server
Boundaries	Client providers create the client/server boundary

Pitfalls and Tips

Never import Server Components directly into Client Components - use children instead.
Keep context providers as low in the tree as possible to minimize re-renders.
Use multiple small contexts rather than one large context for better performance.
Remember that context state resets on full page refresh.

Learn More

layout.tsx (Server)

Context Provider (Client)

useContext Hook (Client Environment)

page.tsx (Server)

All (9)

useContext Hook (Client Environment)

The App Router Gallery

All (9)