# Context API
Course: [React](https://www.devtutorials.ai/learn/react) · Section: State Sharing
Source: https://www.devtutorials.ai/learn/react/state-sharing/context-api
> Why context exists, prop drilling, creating context, Providers, reading with useContext, sharing state across components, when to use context, global state basics, a theme example and performance tips.
## Purpose of the Context API
The **Context API** is a React feature that lets a parent share a value with **every** component below it, without passing it as a prop through each level.
It is used for data that many components need, such as the logged-in user, the theme, or the language of the app.
### Real-World Example
A bookshop app has a light and a dark theme. The header, the book cards and the footer all need to know the current theme, and they are many levels below `App`.
Without context, every component in between must receive the theme as a prop only to pass it on. With context, `App` shares the theme once, and each component that needs it reads it directly.
Context shares a value with all components inside a Provider. Any of them can read it directly, at any depth.
## Prop Drilling
**Prop drilling** means passing a prop through many components that do not use it, just so it can reach a component deep down.
Three components pass user along without using it. This is called prop drilling.
It works, but look at `Page`, `Sidebar` and `Menu`. Each one takes `user` and passes it on, without using it. Problems with this:
- **More code** — Every middle component needs the prop and its type.
- **Hard to change** — Adding a new value means editing every component on the way.
- **Hard to read** — It is not clear which components really use the value.
Context solves this.
## Creating Context
Using context takes three steps.
Create it once, provide it near the top, and read it anywhere below.
The first step is to **create** the context with `createContext`. You do this once, in its own file, and export it.
```tsx
import { createContext } from "react";
interface User {
name: string;
}
export const UserContext = createContext(null);
```
- `createContext` makes a new context.
- `` is the type of the shared value: a user, or `null` when nobody is signed in.
- `null` is the **default value**. A component gets it only if there is no Provider above it.
## Context Provider
The second step is to **provide** a value. Wrap part of your app in the context's `Provider`, and give it a `value`.
```tsx
```
Every component inside the Provider, at any depth, can now read `user`. Components outside it cannot.
Put the Provider as low as you can, but above every component that needs the value. For app-wide data, that is usually near the top, around `App`'s content.
## Reading Context with `useContext`
The third step is to **read** the value. In any component inside the Provider, call `useContext` with the context.
```tsx
const user = useContext(UserContext);
```
Here is the drilling example again, with context. The middle components now pass nothing.
The Provider shares the value. Any component inside it can read it directly.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
`Page`, `Sidebar` and `Menu` have no props now. `UserBadge` reads the user straight from the context.
Look at this line in `UserBadge`:
```tsx
{user ? user.name : "guest"}
```
The type is `User | null`, so `user` may be `null`. The `? :` shows "guest" in that case.
Try removing the `` lines in `App` and press ▶ Run. The badge shows "guest", because without a Provider you get the default value, `null`.
## Sharing Data Across Components
Context can share **state**, not only fixed values. Put the state in the component that holds the Provider, and pass both the value and a function to change it.
Any component inside can then **read** and **change** the shared state.
);
}
const [language, setLanguage] = useState("en");
return (
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Pick हिन्दी from the list. The header and the cart message both change. `LanguagePicker` changed the shared state, and every reader updated.
Look at the Provider:
```tsx
```
The value is an object with two parts: the current `language`, and `setLanguage` to change it. The double braces are an object `{ }` inside a TSX expression `{ }`.
## When to Use Context
Context is useful, but it is not for every piece of data.
**Use context when:**
- many components at **different levels** need the same value, and
- the value is **app-wide**, such as the user, theme, language or cart.
**Do not use context when:**
- only one or two nearby components need the value. Pass props instead.
- the value changes **very often**, such as text typed in a box. Every reader would re-render on every key press.
Try props first. If you pass the same prop through three or more components that do not use it, consider context.
## Global State Basics
**Global state** is state that the whole app can reach. With context, you make global state in three steps:
1. Keep the state with `useState` (or `useReducer`) in a component near the top.
2. Share it, and the functions that change it, through a Provider.
3. Read it anywhere with `useContext`.
A clean way to do this is to put all three in one file: the context, a **Provider component**, and a small **custom hook** to read it.
{children}
);
}
// 2. A custom hook to read it
const cart = useContext(CartContext);
if (cart === null) {
throw new Error("useCart must be used inside ");
}
return cart;
}
`,
"App.tsx": `import { CartProvider, useCart } from "./CartContext";
function CartIcon() {
const { items } = useCart();
return
Cart ({items.length})
;
}
function BookCard({ title }: { title: string }) {
const { addItem } = useCart();
return
);
}
return (
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Click **Add** on the books. The cart icon and the checkout line both update. Here is why this pattern is useful:
- `App` only wraps everything in ``. It does not hold any cart code.
- Each component calls `useCart()` and takes only what it needs.
- If someone forgets the Provider, `useCart` shows a clear error message instead of a confusing bug.
## Theme Example
A **theme** decides the colours of the app, such as light or dark. It is a classic use of context, because nearly every component needs it.
);
}
return (
);
}
`,
"App.css": `.page { padding: 12px; border-radius: 8px; }
.page.light { background: #f8fafc; }
.page.dark { background: #0f172a; }
.card { margin-top: 8px; padding: 10px 12px; border-radius: 6px; }
.card.light { background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; }
.card.dark { background: #1e293b; color: #f8fafc; border: 1px solid #334155; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Click the button. The page and both cards change colour together, because they all read the same `theme` from context.
## Context Performance Considerations
When the Provider's value changes, **every** component that reads that context re-renders. This is usually fine. In big apps, it can make things slow.
Every reader of a context updates together. Keep context values small and stable.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Clear the console, then click **Change context**. Only "Header" and "Cart" render again, because they read the context. `NotReader` does not.
`memo` tells React to skip a component when its props have not changed. You will learn it in a later lesson.
Tips to keep context fast:
- **Split contexts** by topic. Keep `ThemeContext` and `CartContext` separate, so a cart change does not re-render theme readers.
- **Do not put fast-changing values** in context, such as typed text or mouse position.
- **Keep the Provider low** in the tree, around only the components that need it.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Forgetting the Provider | You always get the default value | Wrap the components in `` |
| Reading context in a component outside the Provider | You get the default value | Move the component inside the Provider |
| Passing `value={language}` but reading `{ language }` | `language` is `undefined` | Pass and read the same shape: `value={{ language }}` |
| Creating the context inside a component | A new context every render, so readers lose the value | Create it once, at the top of a file |
| One big context for everything | Small changes re-render many components | Split it into several small contexts |
| Using context for data only one child needs | Extra code for no benefit | Pass a prop instead |
## Check Yourself
## Exercises
## What to Remember
- Context shares a value with every component inside its Provider, so you avoid prop drilling.
- Three steps: `createContext`, wrap with a `Provider` and a `value`, then read with `useContext`.
- Use context for app-wide data. Split it by topic, and keep fast-changing values out of it.
Next: Client-Side Routing