📖 Notes LESSON 8 OF 18

useContext — Global State

⏱️ 25 min

⚛️ React

Skipping Prop Drilling Entirely

Context lets deeply nested components read shared data — like the logged-in user — directly, without passing it down through every component in between.

3-Step Setup

Create, Provide, Consume

createContext(defaultValue)

Creates the context object.

<Context.Provider value={...}>

Wraps the part of the tree that needs access.

useContext(Context)

Reads the value from any descendant component.

Auth Context with a Custom Hook

JSX

import { createContext, useContext, useState } from "react";

const AuthContext = createContext(null);

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

export const useAuth = () => useContext(AuthContext);

// Use anywhere:
function Nav() {
  const { user, logout } = useAuth();
  return user ? <button onClick={logout}>Logout</button> : null;
}

✅

When to reach for Context

Use it for data needed by many components at different nesting levels — auth, theme, language. Not for every piece of state; local component state should stay local.

← Lesson 7: useEffect Lesson 9: useReducer →