createContextuseContextCustom Hook

Context + useContext

Global state without prop drilling. Providers sit at the top; any descendant reads the value with useContext.

Theme Context — Live Demo

Change theme here. Both components below consume the same context — no props passed!

Theme: Dark
Every component reading this context re-rendered automatically. No prop drilling. No lifting state up.
👤 Auth Context
🎤 Interview Answer"Context solves prop drilling — passing props through many layers to reach a deeply nested component. I use it for truly global state: auth, theme, locale, toast notifications. For heavy state + actions, I pair Context with useReducer (a lightweight Redux alternative)."

The Full Pattern (4 steps)

// Step 1: Create context (with TypeScript type + default)
const ThemeCtx = createContext<ThemeContextType>(defaultValue);

// Step 2: Provide it high in the tree
<ThemeCtx.Provider value={{ theme, setTheme }}><App /></ThemeCtx.Provider>

// Step 3: Custom hook for cleaner DX + error guard
function useTheme() {
  const ctx = useContext(ThemeCtx);
  if (!ctx) throw new Error("Missing Provider");
  return ctx;
}

// Step 4: Consume anywhere in the tree
const { theme, setTheme } = useTheme();

Context + useReducer (mini-Redux)

// Combine for complex state management
const [state, dispatch] = useReducer(reducer, init);

<AppContext.Provider value={{ state, dispatch }}>
  <App />
</AppContext.Provider>

// In any child:
const { state, dispatch } = useAppContext();
dispatch({ type: "INCREMENT" });
✅ Pros: No prop drilling, built-in, great for low-frequency updates · ❌ Cons: All consumers re-render on value change — split contexts or use Zustand/Jotai for high-frequency updates