React: What is Context API?

Context API is a built-in React mechanism for passing data through the entire component tree without passing through props at each level.

Simple analogy: Imagine an office building has a public address (PA) system. Before (without Context), to send a message to an employee on the 5th floor, you had to:

1. Tell the secretary on the 1st → 2. Secretary tells the manager on the 2nd → 3. Manager tells the supervisor on the 3rd → ... Finally, the employee on the 5th (prop-drilling!).

With Context you just speak into the microphone (Provider): "To all employees: lunch at 13:00" — and every employee (Consumer/useContext) hears it immediately, regardless of floor.

When to use:

• Theme (light/dark).
• Interface language (i18n).
• Current user data.
• Shopping cart in an online store (for multiple pages).

How to use:

1// 1. Create context
2const ThemeContext = React.createContext('light');
3
4// 2. Wrap part of the tree in Provider
5function App() {
6    const [theme, setTheme] = useState('dark');
7    return (
8        <ThemeContext.Provider value={theme}>
9            <Toolbar />  {/* Everything inside has access to the theme */}
10        </ThemeContext.Provider>
11    );
12}
13
14// 3. Read in any nested component
15function Button() {
16    const theme = useContext(ThemeContext);
17    return <button className={theme}>Button</button>;
18}

How it works internally:

1. When the Provider's value prop changes, all consumers (components using useContext) re-render.
2. React uses a tree-walking algorithm — it traverses from the Provider down to find all matching consumers.
3. If a consumer is between two Providers of the same context, it gets the value from the nearest (closest) Provider.

Advanced pattern — splitting context:

1// Instead of one large context:
2const AppContext = React.createContext({ user: null, theme: "light", lang: "en" });
3
4// Split into separate contexts:
5const UserContext = React.createContext(null);
6const ThemeContext = React.createContext("light");
7const LangContext = React.createContext("en");
8
9// Now updating theme does NOT re-render components that only use user
10function UserAvatar() {
11  const user = useContext(UserContext); // Only subscribes to user changes
12  return <img src={user.avatar} />;
13}

Performance considerations:

• Every time Provider's value changes, ALL consumers re-render — even if they don't use the changed part.
• For frequently changing values (like mouse position), Context causes performance issues because every consumer re-renders on every change.
• Solution: Split contexts by update frequency, or use a state management library like Zustand.

Important: Context is NOT suitable for frequent updates (for example, every second). Every time value changes, all components using this Context re-render. For frequent updates, use Redux, Zustand, or other libraries.