Проброс пропсов и когда он нормален

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

function Page({ user }: { user: User }) {
  return <Layout user={user} />;          // Layout не читает user
}
function Layout({ user }: { user: User }) {
  return <Sidebar user={user} />;         // Sidebar не читает user
}
function Sidebar({ user }: { user: User }) {
  return <Avatar user={user} />;          // наконец, потребитель
}

Layout и Sidebar — чистый транзит. Они получили проп user в свой тип и в свой JSX исключительно как ретранслятор. Этот ретранслятор и есть smell — когда его становится достаточно.

Два-три уровня часто нормальны — не плати за их устранение. Мелкий, стабильный проброс — самая честная форма потока данных, которую предлагает React: ты можешь проследить, откуда именно берётся значение, прочитав JSX, grep находит каждого потребителя, и нет ни косвенности, ни скрытой подписки. Контекст же, напротив, прячет проводку и добавляет канал перерисовки. Для пропа, который пробрасывается на два уровня и редко меняет форму, ретрансляция дешевле любого лекарства.

// Это нормально. Оставь как есть.
<Card>
  <CardHeader title={title} />     {/* один уровень */}
</Card>

function CardHeader({ title }: { title: string }) {
  return <h3>{title}</h3>;
}

Тянуться к контексту здесь не делает код лучше — он меняет видимый, типизированный проп на невидимую глобальную переменную. Инстинкт senior: мелкий проброс — не проблема, пока не пересечён порог.

Проброс становится настоящим smell за порогом: много уровней, много пропсов или текучесть. Боль накапливается, когда (а) цепочка глубокая — пять и больше ретрансляций; (б) ты протягиваешь связку пропсов, а не один; или (в) форма часто меняется, так что каждая правка снова трогает каждый средний компонент. Вот тогда налог на транзит вылезает в виде merge-конфликтов и «почему Layout принимает двенадцать пропсов, которые игнорирует?».

// Теперь это мешает: связка пропсов, протянутая глубоко, которую средние игнорируют.
<Layout user={user} theme={theme} locale={locale} onLogout={onLogout}>
  <Sidebar user={user} theme={theme} locale={locale} onLogout={onLogout}>
    <Nav user={user} theme={theme} locale={locale} onLogout={onLogout} />
  </Sidebar>
</Layout>

Триггер к действию конкретен: посчитай уровни-только-ретрансляторы и связанные пропсы. Один-два чего-то из этого нормальны; четыре уровня, протягивающие четыре игнорируемых пропа, — сигнал к рефакторингу.

Тянись сначала к самому дешёвому лекарству: передаче children, чтобы пропустить уровни, — потом к контексту. Большая часть проброса исчезает не с контекстом, а с композицией: если родитель рендерит глубокого ребёнка как children, значение течёт от владельца прямо к потребителю, а средние компоненты его вовсе не видят. Они становятся раскладочными оболочками, которые принимают children и ничего не знают о user. Только когда потребители действительно далеки и их много и их нельзя срендерить рядом, контекст оправдывает свою цену.

// Лекарство композицией: Layout/Sidebar принимают children, никогда не видят `user`.
function Page({ user }: { user: User }) {
  return (
    <Layout>
      <Sidebar>
        <Avatar user={user} />   {/* владелец рендерит потребителя напрямую */}
      </Sidebar>
    </Layout>
  );
}
function Layout({ children }: { children: React.ReactNode }) {
  return <div className="layout">{children}</div>;
}

Layout и Sidebar полностью лишились пропа user. Ни контекста, ни библиотеки — просто перенос того, кто что рендерит. Это приём, который надо выучить до контекста: композиция убирает проброс, не добавляя канала подписки.