React Context allows you to share global state (e.g. current user, theme, cart items) across the entire component tree without prop drilling.
⊞Code Example
import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext({ theme: 'dark', toggleTheme: () => {} });
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('dark');
const toggleTheme = () => setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export const useTheme = () => useContext(ThemeContext);