useMemo & useCallback — React Deep Dive

the problem: every render mints fresh references

When a parent re-renders, every inline function () {{}} and every object literal {{}} is a brand-new reference. A child wrapped in React.memo() shallow-compares its props, sees new references, and re-renders anyway — the memo did nothing. useMemo and useCallback keep references stable across renders so memoized children actually skip. useMemo caches a value; useCallback caches a function. Both recompute/recreate only when their deps change.

hook	signature	caches	re-runs when
`useMemo`	`useMemo(factory, deps)`	the result of `factory()`	a value in `deps` changes (referential inequality)
`useCallback`	`useCallback(fn, deps)`	the function reference itself	a value in `deps` changes — sugar for `useMemo(() => fn, deps)`
`React.memo`	`React.memo(Component)`	the last render output	any prop fails a shallow `Object.is` compare — needs stable prop refs to help

1 · the memoization you write (edit me)

// Naive recursive Fibonacci — deliberately O(2^n) so the cache matters.
function slowFib(n) {
  if (n <= 1) return n;
  return slowFib(n - 1) + slowFib(n - 2);
}

// A child wrapped in React.memo: it shallow-compares props and SKIPS the
// re-render when every prop is the same reference / value as last time.
var MemoChild = React.memo(function Child(props) {
  // props.onClick keeps the SAME reference only because the parent used
  // useCallback. Without it, a fresh function every render breaks memo.
  return (
    <button
      data-testid="child-btn"
      onClick={props.onClick}
      className="px-4 py-2 bg-[#61dafb] text-[#0d1117] rounded font-bold text-sm hover:opacity-80"
    >
      Clicked: {props.count}
    </button>
  );
});

function MemoDemo() {
  var s1 = React.useState(1); var count = s1[0]; var setCount = s1[1];
  var s2 = React.useState(0); var other = s2[0]; var setOther = s2[1];

  // useMemo: only recomputes fib when `count` changes.
  var fib = React.useMemo(function () { return slowFib(count); }, [count]);

  // useCallback: keeps handleClick the SAME reference forever (empty deps).
  // Pass it to the React.memo child so the child skips re-render on unrelated state.
  var handleClick = React.useCallback(function () {
    setOther(function (x) { return x + 1; });
  }, []);

  // BAD (commented): a fresh function every render — would force MemoChild to
  // re-render even though its real inputs (other) did not change.
  // var handleClickBad = function () { setOther(function (x) { return x + 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">useMemo & useCallback</h2>

      <p data-testid="fib-result" className="text-[#e6edf3] text-sm mb-1">
        fib({count}) = {fib}
      </p>
      <p data-testid="other" className="text-[#8b949e] text-sm mb-3">
        other: {other}
      </p>

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

      <div className="border-t border-[#30363d] pt-4">
        <p className="text-xs text-[#8b949e] mb-2">
          React.memo child (onClick stable via useCallback):
        </p>
        <MemoChild count={other} onClick={handleClick} />
      </div>
    </div>
  );
}

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

2 · Babel compiles JSX → element tree

<MemoDemo/> becomes React.createElement(MemoDemo). React.useMemo(fn, [count]) returns the cached fib unless count changed; React.useCallback(fn, []) returns the same function instance on every render. The gold-check proves the cache survives an unrelated re-render.

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

3 · live React (memoization, proven)

Click count+1 and useMemo recomputes fib. Click other+1 and fib is still cached (the value did not recompute) — while the React.memo child updates only because its count prop changed, never because onClick wiggled. The gold-check drives this automatically.

live: — · gold: fib(1)→(2)→(3), other+1 keeps fib(3)=2, child shows Clicked: 1

intent → pattern

intent	pattern	why
cache a costly value	`useMemo(() => compute(x), [x])`	skips recomputation on unrelated re-renders
stable callback prop	`useCallback(handleClick, [dep])`	keeps the fn ref identical so a `React.memo` child skips
stable object/array prop	`useMemo(() => ({'{'}a, b{'}'}), [a, b])`	object literals are new every render — wrap them to keep refs stable
skip a child's re-render	`React.memo(Child)` + stable props	memo compares props shallowly; it needs BOTH value + ref stability to help
"just in case" memoization	don't — measure with Profiler first	deps comparison + cache storage cost more than the re-render you avoided