"Cannot update a component while rendering a different component": the setState your render body is calling

verbatim errorWarning: Cannot update a component (`CartBadge`) while rendering a different component (`CartItem`). To locate the bad setState() call inside `CartItem`, follow the stack trace as described in the React docs.

Problem

After adding a cart badge that synced a count on every render:

Warning: Cannot update a component (`CartBadge`) while rendering a different component (`CartItem`). To locate the bad setState() call inside `CartItem`, follow the stack trace as described in the React docs.

It warned on every navigation. Everything appeared to work. Three weeks later the same pattern produced a full render loop under React 19's stricter scheduling.

Root cause

Calling a parent's (or context's) setState during your own render — not in an event handler, not in an effect:

function CartItem({ item, setCartCount }) {
  if (item.quantity === 0) {
    setCartCount((c) => c - 1);   // setState DURING render of CartItem
    return null;
  }
  ...
}

Rendering is supposed to be pure. Updating another component's state mid-render makes the render's outcome depend on order, which React cannot guarantee — hence the warning. The error message names both components: the one whose state you set first (CartBadge) and the one doing it illegally (CartItem). Read them in that order and the culprit is usually one call.

fix preview — first 3 of 4 lines (tsx), truncated:

function CartBadge({ items }) {
  const count = items.reduce((n, i) => n + i.quantity, 0);  // derived, no setState
  return <span>{count}</span>;
… 1 more line in the fix

🔒 the fix — including 3 code blocks — is members-only. $1/mo unlocks everything.