Context API

Creating Context

const ThemeCtx = createContext(null);
<ThemeCtx.Provider value={{ theme, toggle }}>...</ThemeCtx.Provider>
const { theme } = useContext(ThemeCtx);

Auth and Theme Providers

Provide user/login/logout and theme/toggle at the app root; consume anywhere below.

Context vs Props vs Redux

Props for 1-2 levels; Context for rarely-changing globals; Redux for frequent complex updates; RTK Query for server state.

Key Points

• Split contexts to avoid mass re-renders.
• Memoize provider values.
• Context is transport, not a store.