Що таке React Context і як його використовувати у проєктах?

Якщо ви працюєте з React, то, напевно, вже чули про React Context. Це один із найкорисніших інструментів React, але водночас і той, який може викликати плутанину. Давайте розберемося, що таке Context, як його використовувати і в яких випадках він стане у пригоді.

Що таке React Context?

React Context — це інструмент, який дозволяє “ділитися” даними між компонентами без необхідності передавати пропси через весь ланцюжок. Це дуже зручно для таких даних, як:

• Тема додатку (темна або світла);
• Мова інтерфейсу (локалізація);
• Дані про користувача (авторизація);
• Стан кошика у магазині.

Простіше кажучи, Context дає змогу створити “глобальну змінну”, яку можна отримати з будь-якого компонента, що знаходиться в межах цього контексту.

Як працює React Context?

Основні компоненти:

1. Створення контексту:
   Використовується React.createContext(), щоб створити об’єкт контексту.
2. Provider (Постачальник):
   Це компонент, який “надає” дані всім своїм дочірнім компонентам.
3. Consumer (Споживач):
   Це компонент, який отримує дані з контексту.

Як використовувати React Context?

Крок 1: Створіть контекст

Для початку створіть об’єкт контексту. Наприклад, якщо ви хочете ділитися темою:

import React from 'react';

const ThemeContext = React.createContext('light'); // 'light' — це значення за замовчуванням
export default ThemeContext;

Крок 2: Надайте значення через Provider

Тепер використайте Provider, щоб “передати” тему всім дочірнім компонентам.

import React from 'react';
import ThemeContext from './ThemeContext';

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

Тут значення "dark" буде доступне всім компонентам, які знаходяться всередині ThemeContext.Provider.

Крок 3: Отримайте значення через Consumer

Дочірні компоненти можуть отримати значення теми за допомогою Consumer:

import React from 'react';
import ThemeContext from './ThemeContext';

function Toolbar() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={`btn-${theme}`}>Кнопка</button>}
    </ThemeContext.Consumer>
  );
}

У цьому прикладі theme отримає значення "dark", і клас кнопки зміниться відповідно до теми.

Сучасний підхід: Використання хуку useContext

У сучасних версіях React для роботи з контекстом можна використовувати хук useContext, що значно спрощує код.

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

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

  return <button className={`btn-${theme}`}>Кнопка</button>;
}

Завдяки useContext вам більше не потрібно використовувати Consumer, що робить код чистішим і зрозумілішим.

Коли використовувати React Context?

1. Для глобальних даних

Якщо дані потрібно використовувати у багатьох компонентах додатку, контекст — це ідеальний варіант. Наприклад:

• Дані про поточного користувача;
• Налаштування теми;
• Локалізація.

2. Для зменшення передачі пропсів

Контекст допомагає уникнути ситуацій, коли пропси потрібно передавати через кілька рівнів компонентів. Це називається “props drilling”.

Коли краще не використовувати React Context?

1. Часті оновлення

Контекст оновлює всі дочірні компоненти, навіть якщо вони цього не потребують. Якщо контекст змінюється часто, це може вплинути на продуктивність. У таких випадках краще використовувати спеціальні інструменти, наприклад, Redux або Zustand.

2. Локальний стан

Для локального стану компонента (наприклад, форма або модальне вікно) контекст не потрібен. Використовуйте useState або useReducer.

Поради щодо використання React Context

1. Уникайте надмірного використання
   Контекст найкраще працює для глобальних даних, але не для локального стану.
2. Розділяйте контексти
   Якщо ваш додаток має кілька незалежних даних (наприклад, тема і мова), створюйте окремі контексти для кожного з них.
3. Оптимізуйте оновлення
   Якщо контекст змінюється часто, використовуйте React.memo або розділіть стан на менші частини.

Приклад: Контекст для теми і мови

import React, { useContext } from 'react';

const ThemeContext = React.createContext();
const LanguageContext = React.createContext();

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <div className={`toolbar-${theme}`}>
      <p>Мова: {language}</p>
      <button>Змінити тему</button>
    </div>
  );
}

У цьому прикладі ThemeContext і LanguageContext працюють незалежно, що покращує розділення відповідальності.

Висновок

React Context — це потужний інструмент, який значно спрощує роботу з глобальними даними у додатках. Він дозволяє уникнути зайвої передачі пропсів і забезпечує зручний спосіб організації стану. Проте, як і будь-який інструмент, контекст слід використовувати з обережністю, уникаючи ситуацій, де він може погіршити продуктивність чи ускладнити структуру коду.

Дотримуючись найкращих практик, React Context допоможе вам створювати чистий, організований і масштабований код.