> Как избежать проброса пропсов через несколько компонентов в React (React)

В React для избежания проброса пропсов через несколько уровней (prop drilling) используются следующие подходы:

1. Context API - встроенное решение React. Создаётся контекст через createContext, провайдер оборачивает дерево компонентов, а дочерние компоненты получают данные через useContext. Подходит для глобальных данных (тема, аутентификация, язык).

2. Композиция компонентов - передача компонентов через children или пропсы-рендеры. Вместо передачи данных глубоко вниз, можно передать готовый JSX-элемент или функцию, которая его возвращает. Это уменьшает связанность.

3. Библиотеки управления состоянием (Redux, Zustand, MobX) - для сложных приложений с частыми обновлениями. Они предоставляют единое хранилище, доступное из любого компонента без проброса пропсов.

4. React Query / SWR - для управления серверными данными. Позволяют получать данные напрямую в компоненте, минуя промежуточные уровни.

Пример с Context API:

JSX
const ThemeContext = React.createContext('light');

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

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // без пропсов
  return <button className={theme}>Кнопка</button>;
}

Выбор метода зависит от масштаба приложения: для простых случаев - Context или композиция, для сложных - стейт-менеджмент.