React Context API

What is Context API in React?

Context provides a value to an entire subtree without passing props through every level. You create a context, wrap part of the tree in its Provider, and any descendant reads the value with useContext.

Why Context API matters

Theme, current user, language and cart data are needed all over an app. Threading them through ten intermediate components that do not use them — prop drilling — makes every component harder to change.

Context API example

// AuthContext.jsx
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const value = { user, login: setUser, logout: () => setUser(null) };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
  return ctx;
}

How this works

Exporting a custom useAuth hook instead of the raw context gives a clear error when a component is used outside the provider, and hides the context object from consumers.

Using it anywhere below the provider

function Header() {
  const { user, logout } = useAuth();
  return user ? <button onClick={logout}>Sign out</button> : <LoginLink />;
}

Key points to remember

• Every consumer re-renders when the provider value changes.
• Memoise the value object with useMemo, or the provider hands out a new object every render.
• Split unrelated data into separate contexts so a theme change does not re-render cart consumers.
• Context is a delivery mechanism, not a state manager — it does not batch, cache or persist anything.

Common mistakes with Context API

• Putting the entire application state in one context, so every change re-renders everything.
• Passing an inline object as value, defeating any downstream memoisation.
• Reaching for context when a component only needs to pass a prop one level down.