React.memo vs === — equal content, different identity — Visualize

React.memo vs === — equal content, different identity

Implement memo’s real comparison, then watch an inline object defeat it every single render.

💡

THE BIG IDEA

"I wrapped it in React.memo and it still re-renders" — the diagnosis is almost always the same five characters: ===. memo compares each prop by IDENTITY, and an object literal written inline is a brand-new identity every render, no matter how identical its content. We implement memo’s comparison honestly, run it against a stable reference and an inline literal, and let the printed output make the case for useMemo and useCallback.

Move your mouse over any line to see what it does. Hover a loop line and it plays through every repeat. Or press ▶ Play to watch the whole thing. On a phone, tap the arrows.

1function memoRender(name, props, last) {
2  const same = last && Object.keys(props).every((k) => props[k] === last[k]);
3  console.log(name + ":", same ? "SKIPPED (props identical)" : "re-rendered");
4  return props;
5}
6const user = { name: "Ravi" };
7let a = null, b = null;
8a = memoRender("BadgeA", { user: user }, a);
9a = memoRender("BadgeA", { user: user }, a);
10b = memoRender("BadgeB", { user: { name: "Ravi" } }, b);
11b = memoRender("BadgeB", { user: { name: "Ravi" } }, b);

●

You wrapped a slow component in React.memo… and it still re-renders every time. The most common "memo does nothing" complaint has a five-character cause: the === it uses.

We implement memo’s actual comparison in three lines, then feed it the same props two different ways — one skips, one never can.

📦 Memory boxes

what the program is remembering right now

nothing remembered yet

🖥️ What the computer shows

the answers the program prints out

nothing yet ▌

1/8

UP NEXT IN REACT

useState, built from scratch — where state REALLY lives

Your component is a function that forgets everything. Build React’s memory shelf in 15 runnable lines and watch a click survive a re-render.

React.lazy & Suspense — the 80kb nobody asked for useState, built from scratch — where state REALLY lives