React Internals Hands-On

Most React performance advice stops at “memoize this” or “split that component.” That helps, but it does not explain why a render happened in the first place.

Start with the commit you can see

When you open React DevTools and highlight an update, you are looking at the output of a reconciliation pass. The framework compares the element tree you returned with the one it already knows about, decides what changed, and schedules DOM work.

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

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

Every click creates a new element description. React does not mutate the previous button in place. It walks the tree, reuses what still matches, and applies the smallest DOM update it can.

What to measure before optimizing

1. Render count - Is the subtree re-rendering because state changed nearby?
2. Commit duration - Is the expensive part layout, paint, or your own logic?
3. Trigger - Did props, context, or a parent render fan out unnecessarily?

A small experiment

Try lifting state one level too high in a list/detail layout, then profile again after colocating it. The difference is often larger than any micro-optimization inside a leaf component.

Takeaway

Understanding React internals is not academic. It is how you stop guessing. Measure the render, identify the trigger, and only then reach for memo, useMemo, or a different state shape.