When will you use this?

Add routing when your app has more than one screen and URLs should be bookmarkable.

• Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
• E-commerce sites route /product/123 to a product detail component.

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.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Tools</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Provider wraps the tree and sets the value.
• Any descendant can useContext(ThemeContext) to read it.

Do this on your computer

1. Create context with createContext.
2. Wrap app section with Provider.
3. Read with useContext in a deep child.
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.
• Open React DevTools (browser extension) while running Context API and inspect component props/state.

Remember

Context shares data across the tree. Provider sets value; useContext reads it. Best for slow-changing global data.

Common questions