Why should you care?

Theme, language, and logged-in user are needed in many components. Context avoids prop drilling through ten middle components.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

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>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

What happened?

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

Try it yourself

1. Create context with createContext.
2. Wrap app section with Provider.
3. Read with useContext in a deep child.
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

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