Render Cascade

Foundational

When a parent renders, all its children render too — even if their props didn't change.

The Default Behavior

React's default is to re-render the entire subtree when a component's state changes. The child doesn't need to have new props — it re-renders simply because its parent did.

cascade.tsx

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>

      {/* Child re-renders even though name NEVER changes */}
      <Child name="Alice" />
    </div>
  );
}

function Child({ name }) {
  // This entire function re-runs when Parent renders
  return <span>Hello, {name}</span>;
}

Watch the Cascade

Click the parent's counter button. Both the parent and the child render counts go up, even though the child's prop stays "Alice" the entire time.

CASCADEParent Renders = Child Renders

<Parent />renders: 1

<Child />renders: 1

prop: name = "Alice" (never changes)

How to Prevent It

Use React.memo() to tell React: "only re-render this child if its props actually changed."

memo-fix.tsx

const MemoChild = React.memo(Child);

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>

      {/* Now Child only re-renders if name changes */}
      <MemoChild name="Alice" />
    </div>
  );
}

When to use React.memo:

The child renders often due to parent state changes
The child's output is the same given the same props
The child is expensive to render

But beware: if you pass objects or functions as props, memo alone won't help — you'll also need useMemo and useCallback to stabilize references.