Как передать что-либо через вложенность в несколько компонентов?

Передать данные через несколько уровней вложенности можно четырьмя способами; выбор зависит от природы данных.

Props через все уровни (prop drilling)

Работает, но при 3+ транзитных компонентах становится проблемой: чужие props в сигнатурах, хрупкость, невозможность переиспользовать промежуточные компоненты.

Композиция — часто лучший ответ

Собрать дерево там, где данные есть, и передать готовые куски через children/слоты:

const App = () => {
  const user = useUser();
  return <Layout sidebar={<Menu avatar={<Avatar user={user} />} />} />;
};

Промежуточные компоненты (Layout, Menu) о user больше не знают. Ноль инфраструктуры.

Context

const ThemeContext = createContext('light');
// провайдер наверху, useContext у любого потомка

Для «окружающих» редко меняющихся данных: тема, локаль, текущий пользователь, сервисы. Минусы: все потребители рендерятся при изменении value (мемоизировать value, разделять контексты).

Стор / серверный кеш

Zustand/Redux с селекторами — для часто меняющегося общего состояния; TanStack Query — для серверных данных (любой компонент берёт их хуком по ключу, без передачи).

Как выбирать

1-2 уровня — просто props. Транзитная передача — композиция. Сквозные редкие данные — Context. Частые обновления и много потребителей — стор. С сервера — React Query.

Коротко для собеседования

Варианты: props (нормально на 1-2 уровня), композиция через children/слоты (убирает саму передачу — недооценённый способ), Context для редких сквозных данных, стор с селекторами или React Query — когда данные общие/серверные. Prop drilling через 5 уровней — сигнал сменить подход.