Какие плюсы и минусы useContext?

useContext: плюсы и минусы

useContext — хук для доступа к Context без промежуточных пропсов.

Плюсы

1. Избежание prop drilling

Передача данных глубоко вложенным компонентам без промежуточных пропсов:

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: "John" }}>
      <Level3 />
    </UserContext.Provider>
  );
}

function Level3() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

2. Глобальное состояние приложения

Тема, язык, авторизация — простое управление данными:

export function useTheme() {
  return React.useContext(ThemeContext);
}

3. Простота использования

Минимальный boilerplate, встроено в React.

Минусы

1. Перерендеры всех подписчиков

Любое изменение вызывает перерендер ВСЕХ компонентов с этим контекстом:

const DataContext = React.createContext();

function DataProvider({ children }) {
  const [data, setData] = React.useState({ users: [], posts: [] });
  
  // Изменение users вызовет перерендер ВСЕх компонентов
  const updateUsers = (newUsers) => {
    setData(prev => ({ ...prev, users: newUsers }));
  };
}

Решение — разделение контекстов по логике.

2. Сложная логика обновления

Для сложных сценариев нужен useReducer или Redux.

3. Отсутствие DevTools

Nет встроенной поддержки DevTools как в Redux.

4. Асинхронные операции

Требуется дополнительная логика для async/await.

5. Тестирование требует Provider

Компоненты нужно обворачивать в Provider при тестировании.

Когда использовать

✅ Подходит для:

• Глобальные настройки (тема, язык)
• Авторизация и данные пользователя
• Простое глобальное состояние
• Избежание prop drilling
• Проекты среднего размера

❌ НЕ подходит для:

• Часто изменяющееся состояние
• Большое сложное приложение
• Нужна история действий
• Сложная логика обновления

Альтернативы

• Redux — сложное состояние
• Zustand — лёгкая альтернатива
• Jotai — атомное состояние
• TanStack Query — серверное состояние

Best Practices

• Разделяйте контексты по логике
• Мемоизируйте значение контекста через useMemo
• Создавайте кастомные хуки
• Используйте TypeScript
• Для сложного состояния выбирайте Redux

useContext отлично работает для простого управления глобальным состоянием, но имеет ограничения при масштабировании.