When will you use this?

Use these patterns when data is shared across pages or comes from a server.

• Shopping carts, user sessions, and API data need clear state patterns.
• Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

Real-world: AuthProvider at app root

Entire Toolliyo app wraps in AuthProvider once in main.jsx — header, sidebar, and lesson player read user without prop chains.

Production-style code

// main.jsx
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <App />
      </AuthProvider>
    </QueryClientProvider>
  </StrictMode>
);

// Any deep child
function LessonPlayer() {
  const { user } = useContext(AuthContext);
  return <p>Continuing as {user.email}</p>;
}

What happens in production: Context fits app-wide session data — not for high-frequency updates (use Zustand or Query for that).

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

const AuthContext = createContext(null);

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

export function useAuth() {
  return useContext(AuthContext);
}

Line-by-line walkthrough

How it works (big picture)

• AuthProvider wraps the app.
• useAuth is a thin wrapper around useContext.
• Any child can call useAuth() without props.

Do this on your computer

1. Create context + Provider component.
2. Wrap App in Provider in main.jsx.
3. Use useContext in deep children.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Change the initial state value and see the starting UI change.
• Open React DevTools (browser extension) while running Context API and inspect component props/state.

Remember

Context = Provider + useContext. Best for slow-changing global data. Custom hook (useAuth) keeps API clean.

Common questions