'use client').1'use client';23import { createContext, useContext, useState } from 'react';45const CounterContext = createContext<{6count: number;7increment: () => void;8} | null>(null);910export function CounterProvider({ children }: { children: React.ReactNode }) {11const [count, setCount] = useState(0);1213return (14<CounterContext.Provider15value={{ count, increment: () => setCount((c) => c + 1) }}16>17{/* Server Components can be passed as children */}18// !mark19{children}20</CounterContext.Provider>21);22}2324export function useCounter() {25const context = useContext(CounterContext);26if (!context)27throw new Error('useCounter must be used within CounterProvider');28return context;29}
| 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 |
Pass Server Components as children to keep data fetching on the server.
| 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 |








