[React](/courses/reactjs) Context is commonly used for client-side shared state such as themes, UI preferences, or certain application providers. However, **[React](/courses/reactjs) Context itself is not available for maintaining client context state directly inside [Server Components](/courses/nextjs)**. A common [Next.js](/courses/nextjs) pattern is to create the Context Provider as a Client Component and render that provider from a Server Component such as a layout. ### Creating a Client Provider ```jsx 'use client'; import { createContext, useState } from 'react'; export const ThemeContext = createContext(null); export default function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); return ( {children} ); } ``` ### Using It From a Server Layout ```jsx import ThemeProvider from './ThemeProvider'; export default function RootLayout({ children }) { return ( {children} ); } ``` The layout itself can remain a Server Component. Only the provider needs to create the client boundary. ### Client Consumer A Client Component can then consume the context: ```jsx 'use client'; import { useContext } from 'react'; import { ThemeContext } from './ThemeProvider'; export default function ThemeButton() { const { theme, setTheme } = useContext(ThemeContext); return ( ); } ``` ### Keep Providers as Deep as Practical A common mistake is creating one huge Client Component around the entire application unnecessarily. For example, instead of making everything client-side, keep the provider focused around the subtree that actually requires it. Conceptually: ```text RootLayout Server ├── Header Server ├── ThemeProvider Client │ └── InteractiveUI └── Footer Server ``` This preserves more of the application as [Server Components](/courses/nextjs). ### Third-Party Providers The same pattern applies to libraries that provide React context, such as certain theme, state-management, authentication, or UI libraries. A small Client Component can wrap the provider while the surrounding layout remains server-oriented. ### Interview-Ready Answer React Context providers that rely on client context/state should be implemented as Client Components. A Server Component or layout can import and render that provider around its children, allowing the outer application to remain server-oriented. Providers should generally be placed as deep in the tree as practical rather than converting the entire application into one large client boundary.