What is the Context API and how to optimize it?

Question

Accepted Answer

**Context API** provides a way to **pass data through the component tree** without having to pass props manually at every level (called **"props drilling"**). It's React's built-in solution for global/shared state. **How it works:** 1. Create a context with `createContext(defaultValue)` 2. Wrap the tree in a `Provider` component with a value 3. Any descendant can access the value with `useContext(TheContext)` **Full code example:** ```tsx import { createContext, useContext, useState, useMemo } from "react"; // 1. Create context with a meaningful default const ThemeContext = createContext<{ theme: "light" | "dark"; toggleTheme: () => void; }>(null!); // 2. Provider component function ThemeProvider({ children }) { const [theme, setTheme] = useState<"light" | "dark">("light"); const toggleTheme = () => setTheme(t => t === "light" ? "dark" : "light"); // Memoize to prevent unnecessary consumer re-renders const value = useMemo(() => ({ theme, toggleTheme }), [theme]); return ( {children} ); } // 3. Consumer component (any depth in the tree) function ThemedButton() { const { theme, toggleTheme } = useContext(ThemeContext); return ( ); } ``` **The performance problem:** When the Provider's `value` prop changes, **ALL** components that call `useContext` for that context re-render — even if they only use a small part of the value. This is the #1 performance issue with Context. **Optimization strategy 1 — Split contexts:** ```tsx // BAD: one giant context — every consumer re-renders on any change const AppContext = createContext({ theme, user, settings, notifications }); // GOOD: split into focused contexts const ThemeContext = createContext(theme); const UserContext = createContext(user); const SettingsContext = createContext(settings); // Now ThemeContext consumers only re-render when theme changes // UserContext consumers only re-render when user changes ``` **Optimization strategy 2 — Memoize the Provider value:** ```tsx // BAD: new object every render = all consumers re-render // GOOD: memoized object = only re-renders when theme changes const value = useMemo(() => ({ theme, setTheme }), [theme]); ``` **Optimization strategy 3 — Use the "state reducer" pattern:** Provide only `dispatch` (which is **stable** across renders) via context, and let consumers read local state via `useReducer`. This way the Provider value never changes. **When to use Context vs. state management libraries:** | Scenario | Use Context | Use Library (Zustand, Redux) | |---------|------------|------------------------------| | Few consumers | ✅ | Overkill | | Infrequent updates | ✅ | Overkill | | Complex state transitions | ❌ | ✅ | | Frequent updates causing perf issues | ❌ | ✅ | | Need DevTools / middleware | ❌ | ✅ |

React: What is the Context API and how to optimize it?