Божественные компоненты и проброс пропсов

Божественный компонент — это низкая связность: он владеет несвязанными обязанностями, поэтому у него много причин меняться. Загрузка, локальное состояние UI, бизнес-логика и раскладка — это четыре разных работы. Собери их вместе — и каждая из них (новый эндпоинт, новый фильтр, смена правила, редизайн) правит один и тот же файл, и каждая правка рискует задеть остальные. Признак — компонент, который не описать одним предложением без «и».

// запах: один компонент, четыре работы, не описать без «и»
function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [status, setStatus] = useState("all");
  const [sort, setSort] = useState("date");
  const [page, setPage] = useState(1);
  const [selected, setSelected] = useState<string[]>([]);

  useEffect(() => { /* fetch + parse + retry */ }, [status, page]);

  const visible = orders /* фильтр по статусу, потом сортировка, потом срез страницы */;
  const revenue = visible.reduce((s, o) => s + o.total, 0); // бизнес-правило

  return <div>{/* тулбар + таблица + пагинация + сводка, всё инлайн */}</div>;
}

Связность — это вопрос «всё ли в этом блоке принадлежит друг другу?». Здесь ответ явно нет.

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

// один хук владеет «какие заказы показать»; странице больше не важно как
function useOrders(filter: { status: string; sort: string; page: number }) {
  const [orders, setOrders] = useState<Order[]>([]);
  useEffect(() => { /* fetch + retry, привязано к filter */ }, [filter.status, filter.page]);
  const visible = useMemo(() => sortBy(filterByStatus(orders, filter.status), filter.sort), [orders, filter]);
  return { visible, revenue: visible.reduce((s, o) => s + o.total, 0) };
}

Страница импортирует useOrders и перестаёт быть клиентом базы данных. Одна обязанность — один дом.

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

function OrdersPage() {
  const [filter, setFilter] = useState({ status: "all", sort: "date", page: 1 });
  const { visible, revenue } = useOrders(filter);
  return (
    <>
      <OrdersToolbar filter={filter} onChange={setFilter} />
      <OrdersTable rows={visible} />        {/* владеет своим состоянием выбора */}
      <OrdersSummary revenue={revenue} />
      <Pagination page={filter.page} onPage={(page) => setFilter((f) => ({ ...f, page }))} />
    </>
  );
}

Божественного компонента больше нет: 12-строчный оркестратор над четырьмя связными частями и одним хуком.

Проброс пропсов — это запах связанности, и самое лёгкое лекарство — передача JSX как children, а не контекст. Когда значение продето сквозь слои, которые его никогда не читают, эти слои привязаны к пропу, который их не касается; переименование или удаление трогает их все. Рефлекс — «подкинуть контекст». Но часто промежуточные слои — это раскладка, а раскладку можно вывернуть: пусть родитель, у которого есть значение, рендерит потребителя и передаёт его вниз как children, чтобы средние слои вообще не видели проп.

// проброс: user продет через Layout -> Sidebar, которые им не пользуются
<Layout user={user}><Sidebar user={user} /></Layout>

// лекарство композицией: средние слои берут children; родитель поставляет потребителя
function Layout({ children }: { children: React.ReactNode }) { return <div className="shell">{children}</div>; }
<Layout><Sidebar><UserBadge user={user} /></Sidebar></Layout>  // user никуда не пробрасывается

Контекст — для случаев, когда многим далёким компонентам нужно одно и то же низкочастотное значение (тема, текущий пользователь, локаль) — а не для перепрыгивания двух слоёв раскладки. Тянись к children первым; он не добавляет ни новых концепций, ни машинерии перерисовок.