Context API

🔍 What Is It?

React Context is a mechanism for making a value available to any component in a subtree, without passing it explicitly through every intermediate component.

Three parts:

1. createContext(defaultValue) — creates the context object
2. <Context.Provider value={...}> — wraps the tree and provides the value
3. useContext(Context) — reads the value in any descendant component

When the Provider's value changes, all components consuming that context re-render. This is both the power and the limitation of Context.

🎯 Why Do We Need It?

Prop drilling — passing data through many intermediate components that don't use it — becomes painful at scale:

App (has user)
  └─ Layout (passes user)
      └─ Sidebar (passes user)
          └─ NavMenu (passes user)
              └─ UserAvatar (FINALLY uses user)

Context eliminates the middle layers:

App (provides user via Context)
  └─ Layout
      └─ Sidebar
          └─ NavMenu
              └─ UserAvatar (reads user from Context directly)

🏗️ What Happens in Real Projects?

Context is ideal for data that is:

• →Truly global — the authenticated user, feature flags, theme
• →Infrequently changing — does not update on every keystroke or scroll
• →Needed deep in the tree — would require 3+ levels of prop drilling

Real examples:

• →AuthContext — current user, login(), logout()
• →ThemeContext — 'light' | 'dark', toggleTheme()
• →ToastContext — showToast(), dismissToast()
• →PermissionsContext — user permissions derived from role
• →LocaleContext — current language, t() translation function

⚙️ How It Works

1. createContext creates a context object with a default value (used when no Provider is above)
2. The Provider component accepts a value prop and makes it available to all descendants
3. useContext subscribes the component to the context — it re-renders whenever the value changes
4. If the value is an object, the entire object is compared by reference — a new object on every render causes all consumers to re-render

Performance pattern:

Split contexts by update frequency. An AuthContext (rarely changes) and a CartContext (changes on every item add) should be separate. If combined, every cart update re-renders auth consumers.

💻 Example

Auth Context — Production Pattern — A complete, type-safe auth context with the provider pattern.

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'adjuster' | 'viewer';
}

interface AuthContextValue {
  user: User | null;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

// Default value is used when no Provider is above — useful for testing
const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Restore session on mount
  useEffect(() => {
    restoreSession()
      .then(setUser)
      .finally(() => setIsLoading(false));
  }, []);

  const login = useCallback(async (email: string, password: string) => {
    const user = await authService.login(email, password);
    setUser(user);
  }, []);

  const logout = useCallback(() => {
    authService.logout();
    setUser(null);
  }, []);

  // Memoize value to prevent re-renders when parent re-renders
  const value = useMemo(
    () => ({ user, isLoading, login, logout }),
    [user, isLoading, login, logout]
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Custom hook — throws if used outside Provider
export function useAuth(): AuthContextValue {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits