SESSION 051 — Context API

CONCEPTS.UNLOCKED

🌐

React Context API

Share data across the component tree without prop drilling. Any component at any depth can access context data directly — no passing through intermediate components.

🏗

createContext, Provider, useContext

createContext() creates the container. <Provider> wraps the tree and provides the value. useContext() reads it from any child. Three pieces, one system.

⚖

Context vs Props vs External

Props: 1-2 levels deep. Context: shared across many components (theme, auth, settings). External state (Redux): very complex apps with many state slices.

✂

Splitting Contexts

Separate concerns: ThemeContext, AuthContext, EditorContext. A theme change shouldn't re-render components that only use auth. Each context triggers only its consumers.

⚡

Performance Caveat

Context changes re-render ALL consumers. Splitting contexts minimizes this. For frequently changing data (slider values), keep state local or use memoization.

🪝

Custom Hook for Context

useEditor() wraps useContext with an error check. If used outside the Provider, throw a helpful error. Clean API for consumers.

HANDS-ON.TASKS

Identify the Prop Drilling

▶

Trace theme from App → Layout → Sidebar → Panel → FilterSlider — 5 levels! Layout and Sidebar don't even use theme. They just pass it through.

Create ThemeContext

▶

const ThemeContext = createContext({
  theme: 'dark', toggleTheme: () => {}
});

function ThemeProvider({ children }) {
  const [theme, setTheme] =
    useLocalStorage('theme', 'dark');
  const toggleTheme = () =>
    setTheme(t => t === 'dark' ? 'light' : 'dark');

  return (
    <ThemeContext.Provider
      value={{ theme, toggleTheme }}>
      <div className={
        theme === 'dark' ? 'dark' : ''
      }>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

// Any component, at any depth:
function FilterSlider() {
  const { theme } = useContext(ThemeContext);
  // Use theme directly — no props needed!
}

Create EditorContext with Reducer

▶

const EditorContext = createContext(null);

function EditorProvider({ children }) {
  const [state, dispatch] = useReducer(
    editorReducer, initialState
  );
  return (
    <EditorContext.Provider
      value={{ state, dispatch }}>
      {children}
    </EditorContext.Provider>
  );
}

// Custom hook for easy access:
function useEditor() {
  const context = useContext(EditorContext);
  if (!context) throw new Error(
    'useEditor must be used within EditorProvider'
  );
  return context;
}

Create AuthContext

▶

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (credentials) => {
    /* ... */
  };
  const logout = () => { setUser(null); };

  return (
    <AuthContext.Provider value={{
      user, login, logout,
      isAuthenticated: !!user
    }}>
      {children}
    </AuthContext.Provider>
  );
}

Preparing for the backend (Phase 3). AuthContext provides user, login, logout, and isAuthenticated to any component that needs it.

Refactor App & Verify

▶

Wrap App with providers, remove 20+ prop-drilling instances. Verify: theme toggle works from any component, editor state accessible everywhere.

Close the Ticket

▶

git switch -c refactor/PIXELCRAFT-039-context
git add src/
git commit -m "Add Theme/Editor/Auth contexts, remove prop drilling (PIXELCRAFT-039)"
git push origin refactor/PIXELCRAFT-039-context
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Global state is a fundamental challenge in all complex systems.

React Context is the simplest version of this universal problem.

// Shared state everywhere:

Operating systems  → environment variables,
                     system config
Databases          → shared state accessed
                     by multiple processes
Distributed systems → consensus algorithms
                     (Raft, Paxos)

// You'll encounter increasingly complex
// state-sharing challenges as systems
// grow — from Context to Redux to
// distributed databases.

REF.MATERIAL

ARTICLE

Passing Data Deeply with Context — React.dev

React Team

Official guide: when to use Context, creating providers, consuming with useContext, and splitting contexts for performance.

CONTEXTOFFICIALESSENTIAL

VIDEO

React Context — Web Dev Simplified

Web Dev Simplified

Practical Context walkthrough: creating contexts, providers, consumers, custom hooks, and when Context is the right choice.

CONTEXTPRACTICAL

ARTICLE

Scaling Up with Reducer and Context — React.dev

React Team

Combining useReducer with Context: the pattern used in Session 50-51. Centralized state accessible from anywhere in the tree.

CONTEXTREDUCEROFFICIAL

VIDEO

React State Management — Fireship

Fireship

When to use Context vs Redux vs Zustand vs Jotai. The landscape of state management solutions and their tradeoffs.

STATECOMPARISON

ARTICLE

How to Use React Context Effectively

Kent C. Dodds

Best practices: custom hooks for context, splitting providers, performance pitfalls, and when NOT to use Context.

CONTEXTBEST PRACTICES

CONTEXT API