Что такое React Context и когда его следует использовать?

React Context: назначение и применение

React Context — это встроенная функция React для передачи данных между компонентами без пробросывания props через всю иерархию. Context позволяет делиться состоянием с множеством компонентов, находящихся на разных уровнях вложенности.

Что такое React Context

Context — это объект, который содержит данные и делает их доступными для всех вложенных компонентов без необходимости передавать props на каждом уровне. Это решает проблему prop drilling — когда нужно пробрасывать props через множество промежуточных компонентов.

Как устроен Context

Context состоит из трёх частей:

1. Создание Context:

const ThemeContext = React.createContext<Theme | undefined>(undefined);

2. Provider — поставщик данных:

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<Theme>('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

3. Consumer — использование данных:

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

Пример использования

const UserContext = createContext<User | null>(null);

export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = () => {
  const user = useContext(UserContext);
  if (!user) throw new Error('useUser must be used within UserProvider');
  return user;
};

const Profile = () => {
  const user = useUser();
  return <div>Welcome, {user.name}</div>;
};

function App() {
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
}

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

Используй Context для:

1. Глобальные настройки приложения

• Тема (светлая/тёмная)
• Язык интерфейса
• Часовой пояс пользователя

2. Данные текущего пользователя

• Информация профиля
• Права доступа
• Статус аутентификации

3. Состояние, используемое в разных частях приложения

• Содержимое модального окна
• Уведомления
• Контекст навигации

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

Избегай Context для:

1. Часто изменяющихся данных Когда Context обновляется, ВСЕ компоненты, подписанные на него, перерендериваются. Это создаёт проблемы с производительностью.

2. Сложного состояния, требующего частых обновлений Для этого используй Redux, Zustand или другой state management.

3. Данных, которые должны передаваться через мало компонентов Если только 2-3 компонента нуждаются в данных, лучше пробросить props.

Проблемы Context и решения

1. Ненужные перерендеры

Проблема: даже если компонент не использует изменённую часть Context, он всё равно перерендеривается.

Решение — разделить на несколько Context для разных доменов.

2. Сложность отладки

ContextAPI не показывает иерархию передачи данных в DevTools как Redux.

Context vs Redux

Best Practices

1. Разделяй Context по доменам — один Context для одной функции
2. Создавай кастомные hooks — useTheme(), useAuth() вместо прямого useContext()
3. Типизируй с TypeScript — всегда указывай типы данных в Context
4. Проверяй инициализацию — выбрасывай ошибку, если hook используется вне Provider
5. Комбинируй с другим state management — Context для глобальных настроек, Redux для сложного состояния