Что такое prop drilling и как с ним бороться?

О чём речь

Prop drilling — протаскивание пропсов через цепочку промежуточных компонентов, которым эти данные сами по себе не нужны: они лишь «пересылают» их глубокому потомку.

<App user={user}>
  <Page user={user}>
    <Sidebar user={user}>
      <Avatar user={user} />
    </Sidebar>
  </Page>
</App>

Page и Sidebar раздуваются пропом user только ради Avatar. При рефакторинге такая цепочка легко ломается и шумит в типах/PropTypes.

Как борются

• Композиция — передать уже собранный <Avatar /> через children/slots, не прокидывая данные сквозь середину.
• Context — для genuinely shared значений (тема, сессия, локаль).
• Локальный store (Redux, Zustand) — когда доменный state сложный и обновляется часто.
• Пересмотреть границы компонентов: иногда state просто лежит слишком высоко.

Важная оговорка

Drilling на один-два уровня часто нормален и даже читаемее скрытого контекста. Проблема — длинные хрупкие цепочки и «пропы ради пропов». На собеседовании ценят взвешенный ответ, а не «всегда Context».

Итог: prop drilling — сквозная передача данных; лечится композицией, Context или стором — по длине цепочки и частоте обновлений.

Хороший эвристический тест: если промежуточный компонент только пробрасывает проп дальше и не использует его — это кандидат на композицию или контекст, а не на ещё один аргумент в сигнатуре.