Suggest an edit

Improve this article

Refine the answer for “How do you create a Context?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Step 1. Import `createContext`

```javascript
import { createContext } from "react";
```

---

## Step 2. Create the context itself

```javascript
export const ThemeContext = createContext("light");
```

### What `createContext(defaultValue)` does:

- creates a **context object**;
- `defaultValue` is used **only when there is no** `<Provider>` **higher up the tree**.

> Usually `defaultValue` is set only for types (e.g. with TypeScript) or for tests.

---

## Step 3. Wrap the needed part of the app in a **Provider**

```javascript
import { ThemeContext } from "./ThemeContext";

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

### What the Provider does:

- makes the value (`value="dark"`) available to **all child components**;
- when `value` changes -> all consumers re-render.

---

## Step 4. Use the context inside a component

```javascript
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Button() {
  const theme = useContext(ThemeContext);

return <button className={theme}>Theme: {theme}</button>;
}
```

### What `useContext(Context)` does:

- returns the **current value** of the context (from the nearest Provider);
- the component **re-renders automatically** when this value changes.

---

## Full example:

```javascript
// ThemeContext.js
import { createContext } from "react";
export const ThemeContext = createContext("light");

// App.jsx
import { ThemeContext } from "./ThemeContext";
import Button from "./Button";

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div>
        <h1>Context example</h1>
        <Button />
      </div>
    </ThemeContext.Provider>
  );
}

// Button.jsx
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

export default function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Current theme: {theme}</button>;
}
```

---

## Common mistakes and tips

| Mistake | How to fix it |
|---|---|
| Using `useContext` without a Provider | Add a `<Context.Provider>` higher up the tree |
| Every re-render of App changes the `value={{user}}` object | Wrap `value` in `useMemo` |
| Using a single context for everything | Split by meaning: `ThemeContext`, `AuthContext`, `LangContext`, etc. |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts322 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.