React.memo — the prop-guarded re-render skip

parent re-render → child re-render (unless memoized)

When a parent re-renders, React re-renders every child by default — even children whose props did not change. React.memo(Component) wraps a component so React first runs a shallow prop comparison (Object.is per prop); if every prop is referentially equal, React skips the re-render and reuses the last rendered output. memo is a performance optimization, never a correctness mechanism — the un-memoized app renders identically, just slower.

piece	role	analogy
`React.memo(C)`	higher-order component returning a memoized version of `C`	a bouncer at the component door — checks the props "ID" before letting a re-render in
shallow compare	`Object.is(prevProps[key], nextProps[key])` for every key	compares the envelope, never opens it — only references, not deep contents
2nd arg comparator	`(prevProps, nextProps) => areEqual` — return `true` to SKIP	a custom bouncer who opens only the props you name
when it breaks	parent passes a fresh function/object/array literal each render	new envelope every time → bouncer always lets the re-render through

1 · the memo you write (edit me)

// Module-level render counter — NOT state, so it never triggers renders.
// We only mutate it to COUNT how many times MemoChild's body actually runs.
var renderCount = { child: 0 };

// React.memo wraps Child. On every parent re-render React runs a shallow
// prop compare; if no prop changed (Object.is per prop), the body is SKIPPED.
var MemoChild = React.memo(function Child(props) {
  renderCount.child++; // only runs when React actually re-renders this child
  return (
    <div
      data-testid="child"
      className="p-3 bg-[#0d1117] border border-[#30363d] rounded text-[#e6edf3] text-sm"
    >
      Child (render #{renderCount.child}): {props.title}
    </div>
  );
});

function MemoParent() {
  var countState = React.useState(0);     // child DEPENDS on this (props.title)
  var count = countState[0];
  var setCount = countState[1];
  var otherState = React.useState(0);     // child does NOT depend on this
  var other = otherState[0];
  var setOther = otherState[1];

  return (
    <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-3">React.memo demo</h2>

      {/* title is a STRING built from `count` only — stable when only `other` changes */}
      <MemoChild title={'Count is ' + count} />

      <div className="flex flex-col gap-2 mt-4">
        <button
          data-testid="inc-count"
          className="px-4 py-2 bg-[#61dafb] text-[#0d1117] rounded font-bold text-sm hover:opacity-80"
          onClick={function () { setCount(count + 1); }}
        >
          count+1 (changes child props)
        </button>
        <button
          data-testid="inc-other"
          className="px-4 py-2 bg-transparent border border-[#61dafb] text-[#61dafb] rounded font-bold text-sm hover:opacity-80"
          onClick={function () { setOther(other + 1); }}
        >
          other+1 (child props unchanged)
        </button>
      </div>

      <p data-testid="child-renders" className="mt-3 text-xs text-[#8b949e]">
        Child rendered: {renderCount.child} times
      </p>
      <p data-testid="parent-state" className="mt-1 text-xs text-[#8b949e]">
        Parent state — count: {count}, other: {other}
      </p>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<MemoParent/>);

2 · Babel compiles JSX → element tree

<MemoChild/> becomes React.createElement(MemoChild). On parent re-render React calls Object.is on each prop; if all match, the memoized child's body never executes and renderCount.child stays put.

// (hit "compile & render" to see Babel's output)

3 · live React (the skip, proven)

Click other+1 — the parent re-renders but the child's title prop is unchanged, so React.memo skips it (render count holds). Click count+1 — title changes, the shallow compare fails, and the child re-renders. The gold-check drives this automatically and asserts the render count at every step.

child renders: — · gold: note init → other+1 (hold) → count+1 (rise) → other+1 (hold)

intent → pattern

intent	pattern	why
skip a child when props are unchanged	`const C = React.memo(function C(props){...})`	shallow `Object.is` per prop → reuse last output
keep a function prop stable	`useCallback(fn, deps)` in the parent	without it the handler is a fresh ref each render → memo always re-renders
keep an object/array prop stable	`useMemo(() => ({...}), deps)` in the parent	object/array literals are new refs every render → memo always re-renders
compare only some props	`React.memo(C, (prev, next) => prev.id === next.id)`	return `true` to SKIP, `false` to re-render
decide IF to memo	profile first; wrap only measurably expensive trees	memo has its own compare cost — wrapping cheap components is a net loss