Suggest an edit

Improve this article

Refine the answer for “What does `useContext()` do?”. 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)

## What `useContext()` does

The `useContext()` hook lets you **read a value from React context**
that was passed down through a `<Context.Provider>` component somewhere higher up the tree.

> More simply:
> `useContext` lets a component reach shared data
> **without passing it through props**.

---

## How it works (step by step)

### 1. Create a context

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

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

`createContext()` creates a context object with a `.Provider` and a `.Consumer` method.

---

### 2. Wrap part of the app in a `Provider`

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

Everything inside `<ThemeContext.Provider>`
gets access to the value `"dark"`.

---

### 3. Read the context value in any nested component through `useContext`

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

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

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

Now `Button` knows which theme is selected (`dark`),
even though nobody explicitly passed it that prop!

---

## Example using state

Context is often combined with state to pass **dynamic data** (for example, theme, language, or the user).

```javascript
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);

return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle theme (current: {theme})
    </button>
  );
}
```

Now any number of components can read and change the theme,
**without threading props through every level**.

---

## When to use `useContext`

| When | Why |
|---|---|
| Data is needed in many components | For example, the current user, language, theme, settings |
| You do not want to pass props by hand | `useContext` removes "prop drilling" |
| You need a global "state" without Redux or Zustand | Context + `useState` = simple global logic |

---

## Important to know

| Feature | Explanation |
|---|---|
| `useContext` re-renders a component when the context value changes | If `value` changed, every subscriber re-renders |
| Context is **not cached** like `useMemo` | Updates are delivered synchronously |
| Context cannot be called outside a `Provider` | Otherwise the value comes from `createContext(defaultValue)` |
| Contexts can be nested | React merges them correctly |

---

## Difference from props

| Props | useContext |
|---|---|
| Passed top-down manually | Automatically available to all descendants |
| Work locally | Work globally within the `Provider` |
| More flexible and transparent | More convenient for global data |

---

## Summary

| Question | Answer |
|---|---|
| What does `useContext()` do | Lets you access the value from the nearest `Context.Provider` |
| When to use it | When components need to share common data without props |
| What it returns | The current context value |
| Usage examples | Theme, language, user, settings, authentication state |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.