Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Доступ до контексту в компоненті». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Спосіб 1. Сучасний - **через хук** `useContext` **(функціональні компоненти)**

Це **основний і найзручніший спосіб** у React з хуками.

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

function Button() {
  const theme = useContext(ThemeContext); // отримуємо поточне значення контексту
  return <button className={theme}>Тема: {theme}</button>;
}
```

### Що робить `useContext(Context)`:

- повертає **значення**, передане в найближчому `<Context.Provider>`;
- автоматично **підписує компонент на оновлення** цього значення;
- викликає **перерендер**, якщо `value` у Provider змінилося.

---

## Спосіб 2. Старий - **через** `<Context.Consumer>`

Використовується в **класових компонентах** або там, де хуки недоступні.

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

function Button() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Тема: {theme}</button>}
    </ThemeContext.Consumer>
  );
}
```

Працює аналогічно `useContext`,
але синтаксис громіздкий - використовується рідко, здебільшого для зворотної сумісності.

---

## Спосіб 3. У **класовому компоненті** через `contextType`

Якщо ти використовуєш класовий компонент (без хуків):

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

class Button extends React.Component {
  static contextType = ThemeContext;

render() {
    const theme = this.context; // доступ до контексту
    return <button className={theme}>Тема: {theme}</button>;
  }
}
```

Особливості:

- працює тільки з **одним контекстом**;
- React автоматично підставляє значення з найближчого `<Provider>`.

---

## Приклад повного циклу

```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">
      <Button />
    </ThemeContext.Provider>
  );
}

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

export default function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Поточна тема: {theme}</button>;
}
```

У результаті:
компонент `Button` отримує доступ до `"dark"` напряму, **без передавання props** через дерево.

---

## Підсумок

| Спосіб | Де використовувати | Як |
| --- | --- | --- |
| `useContext(Context)` | Сучасний, функціональні компоненти | `const value = useContext(MyContext)` |
| `<Context.Consumer>` | Універсальний, старий синтаксис | `<Context.Consumer>{value => (...)}</Context.Consumer>` |
| `contextType` | Класові компоненти | `static contextType = MyContext` + `this.context` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати340 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.