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

Что проверяют

Знаете ли вы про композицию, а не только про контекст.

Как отвечать

Проблема называется прокидыванием пропсов: значение нужно глубоко внизу, а промежуточные компоненты вынуждены принимать и передавать его дальше, хотя сами не используют. Через два уровня это нормально, через пять становится проблемой: правка сигнатуры задевает всю цепочку.

Способы, в порядке от лучшего:

1. Композиция через содержимое. Самый недооценённый приём. Вместо передачи данных вниз готовый элемент создаётся наверху и передаётся внутрь как содержимое:

<Layout sidebar={<UserPanel user={user} />}>
  <Content />
</Layout>

Здесь макет ничего не знает о пользователе, а промежуточные уровни исчезают. Бонусом элемент не пересоздаётся при рендере обёртки, что само по себе оптимизация.

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

3. Хранилище состояния, если речь о настоящем общем клиентском состоянии со сложными переходами.

4. Кэш серверных данных. Часто прокидывают именно загруженные с сервера данные. При использовании библиотеки кэша запросов нужный компонент просто запрашивает их сам: повторного обращения к сети не будет, ответ придёт из кэша.

Правило выбора: сначала попробовать композицию, и только если она не помогает, брать контекст. Хранилище нужно реже, чем кажется.

Где спотыкаются

Сразу тянут контекст или глобальное хранилище.

Не знают про передачу элементов содержимым.

Кладут в контекст часто меняющееся состояние.

Прокидывают загруженные данные вместо повторного запроса из кэша.