🔧 Referential Equality & Memoization: Why `{} !== {}` Breaks React Performance

You've probably seen code like this in React:



<ChildComponent config={{ theme: 'dark' }} />






And wondered why ChildComponent re-renders on every parent render, even when wrapped in React.memo.

Or you've used useEffect and seen it run repeatedly:



useEffect(() => {
fetchData();
}, [config]); // 'config' is recreated every...