Чи був досвід роботи з контекстом? Коли його варто використовувати?

Повне пояснення

Що це і навіщо

React Context – API, що забезпечує доступ до значень (state, функцій) з будь‑якого рівня компонентної ієрархії без пропс‑передавання. Використовується, коли:

• Дані потрібні багатьом компонентам (наприклад, користувач, тема, локалізація).
• Змінюються рідко або мають глобальний характер.

Ключові принципи

• Provider огортає дерево і передає значення.
• Consumer або useContext читають це значення.
• Context не замінює Redux чи Zustand, а доповнює їх для простих випадків.

Як це працює

1. Створюється контекст: const ThemeContext = React.createContext(defaultValue);.
2. У верхньому компоненті обгортаємо дерево: <ThemeContext.Provider value={theme}>.
3. У дочірніх компонентах читаємо: const theme = useContext(ThemeContext);.

Практика і реалізація

// theme-context.tsx
import { createContext, useState } from 'react';
export const ThemeContext = createContext({ theme: 'light', toggle: () => {} });
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggle = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));
  return <ThemeContext.Provider value={{ theme, toggle }}>{children}</ThemeContext.Provider>;
};

// component.tsx
import { useContext } from 'react';
import { ThemeContext } from './theme-context';
const Button = () => {
  const { theme, toggle } = useContext(ThemeContext);
  return <button onClick={toggle}>Тема: {theme}</button>;
};

Тестування

Для Context‑тестів використовуйте render з @testing-library/react і обгорніть компонент у Provider.

import { render, screen } from '@testing-library/react';
import { ThemeProvider } from './theme-context';
import Button from './component';

test('toggle theme', () => {
  render(<ThemeProvider><Button /></ThemeProvider>);
  const btn = screen.getByRole('button');
  expect(btn).toHaveTextContent(/light/);
  fireEvent.click(btn);
  expect(btn).toHaveTextContent(/dark/);
});

Особливості в контексті React

• Context не виконує оптимізацію перерендерів; кожен оновлений контекст тригерить рендер усіх Consumer.
• Для частих змін використовуйте useReducer або зовнішні state‑менеджери.
• Можна комбінувати Context з React.memo або useMemo для мінімізації перерендерів.

Оптимізація, типові помилки та edge cases

1. Надмірне використання: Context для кожного маленького state → збільшує рендери.
2. Відсутність типізації: у TS варто визначити інтерфейс значення.
3. Проблеми з SSR: Context‑значення можуть бути різними на сервері і клієнті.
4. Проблеми з кешуванням: Якщо value‑об’єкт створюється в компоненті, він змінюється при кожному рендері.
5. Відсутність fallback: Якщо Consumer використовується поза Provider, отримаєте defaultValue.
6. Проблеми з оновленням: Якщо функція toggle створюється в компоненті, її референс зміниться.
7. Проблеми з асинхронністю: Якщо контекст залежить від async‑запитів, треба обробляти loading/erro states.
8. Проблеми з багатопоточністю: При використанні React 18 Concurrent Mode, Context‑значення можуть бути «запізнілими».

Cheatsheet

• createContext(defaultValue) – створює контекст.
• <Provider value={...}> – огортає дерево.
• useContext(Context) – читає значення.
• Для глобального state: Context + useReducer або зовнішній store.

Follow‑up питання

1. Як уникнути непотрібних перерендерів при використанні Context? – Відповідь: мемоізувати value, використовувати React.memo.
2. Коли краще використати Redux замість Context? – Відповідь: коли state змінюється часто і потрібна складна логіка.
3. Як працює Context у SSR? – Відповідь: значення повинні бути синхронними, або використовувати Hydration.