God components & prop drilling

A god component is low cohesion: it owns unrelated concerns, so it has many reasons to change. Fetching, local UI state, business logic, and layout are four different jobs. Bundle them and every one of them — a new endpoint, a new filter, a rule change, a redesign — edits the same file, and every edit risks the others. The tell is a component you can’t summarize in one sentence without saying “and”.

// the smell: one component, four jobs, no summary without "and"
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 /* filter by status, then sort, then slice page */;
  const revenue = visible.reduce((s, o) => s + o.total, 0); // business rule

  return <div>{/* toolbar + table + pagination + summary, all inline */}</div>;
}

Cohesion is the question “does everything in this unit belong together?” Here the answer is plainly no.

Extract the non-rendering jobs into custom hooks — fetching and derived state are not layout. Data loading, retries, filtering, and the revenue calculation are logic, not markup. A custom hook gives that logic a name, a testable surface, and a reuse point, and it shrinks the component to what it actually renders. This is the cohesion cure for the behavioral half of the god component.

// one hook owns "what orders to show"; the page no longer cares how
function useOrders(filter: { status: string; sort: string; page: number }) {
  const [orders, setOrders] = useState<Order[]>([]);
  useEffect(() => { /* fetch + retry, keyed on 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) };
}

The page imports useOrders and stops being a database client. One concern, one home.

Split the remaining markup by composition — each visual piece becomes a component with one job. The toolbar, table, pagination, and summary are independent renderers. Pulled apart, each has a tiny prop surface, is reusable, and re-renders only when its inputs change. Crucially, colocate state with the piece that owns it: selection lives in the table, not the page, so toggling a row doesn’t re-render the toolbar.

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} />        {/* owns its own selection state */}
      <OrdersSummary revenue={revenue} />
      <Pagination page={filter.page} onPage={(page) => setFilter((f) => ({ ...f, page }))} />
    </>
  );
}

The god component is gone: a 12-line orchestrator over four cohesive pieces and one hook.

Prop drilling is the coupling smell — and the lightest cure is passing JSX as children, not context. When a value is threaded through layers that never read it, those layers are coupled to a prop that isn’t their business; renaming or removing it touches all of them. The reflex is “drop in a context”. But often the layers in between are layout, and layout can be inverted: let the parent that has the value render the consumer and pass it down as children, so the middle layers never see the prop at all.

// drilling: user threaded through Layout -> Sidebar that don't use it
<Layout user={user}><Sidebar user={user} /></Layout>

// composition cure: middle layers take children; the parent supplies the consumer
function Layout({ children }: { children: React.ReactNode }) { return <div className="shell">{children}</div>; }
<Layout><Sidebar><UserBadge user={user} /></Sidebar></Layout>  // user never drilled

Context is for when many distant components need the same low-frequency value (theme, current user, locale) — not for skipping two layout layers. Reach for children first; it adds zero new concepts and no re-render machinery.