Memoization

By default, when a parent component updates, all of its children re-render recursively—regardless of whether their props changed.

Memoization provides an opt-in mechanism to tell React to skip re-rendering a component if its inputs haven't changed, and reuse the last output.

1. Component Memoization (React.memo)

React.memo wraps a component to perform a shallow comparison (Object.is) of previous and current props before rendering.

• Primitive Props: Strings, numbers, and booleans are compared by value.
  • If only primitives are passed and their values haven't changed, React skips the render entirely.
• Non-Primitive Props: Objects, arrays, and functions are evaluated by memory reference.
  • Every time a parent re-renders, any inline object, array, or function is recreated at a new memory location. React.memo detects the new reference, assumes props changed, and re-renders anyway.

// HeavyChild is wrapped in React.memo
const HeavyChild = React.memo(({ config, onClick }) => {
  return <button onClick={onClick}>{config.title}</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  // Even though the contents are identical, these receive NEW memory 
  // addresses on every parent re-render, breaking React.memo instantly.
  const config = { title: "Dashboard" };
  const handleClick = () => console.log("Clicked");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Counter: {count}</button>
      <HeavyChild config={config} onClick={handleClick} />
    </div>
  );
};

React.memo will fail to prevent re-renders in the code above. Even though config and handleClick look identical on every render. JavaScript creates brand-new memory references for them every single time Parent re-renders (when count changes).

Here is how React.memo fails:

1. count updates: You click the counter button, changing state in Parent.
2. Parent re-evaluates:
   • const config = { title: "Dashboard" }; allocates a new object in memory.
   • const handleClick = () => ...; allocates a new function in memory.
3. React.memo checks props:
   • It compares prevProps.config vs nextProps.config.
   • In JS, { title: "Dashboard" } === { title: "Dashboard" } evaluates to false because their memory locations differ.
4. Result: React.memo sees the props as "changed" and re-renders HeavyChild anyway.

How to Fix It

To make React.memo actually work here, we have two options:

Option A: Move static data outside the component (Simplest)

If config and handleClick don't depend on state or props inside Parent, move them outside the render function entirely so their references never change:

// Defined once when the module loads—memory reference never changes
const CONFIG = { title: "Dashboard" };
const HANDLE_CLICK = () => console.log("Clicked");

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Counter: {count}</button>
      <HeavyChild config={CONFIG} onClick={HANDLE_CLICK} />
    </div>
  );
};

Option B: Stabilize references with useMemo & useCallback

If the object or function relies on values inside Parent, wrap them in hooks:

const Parent = () => {
  const [count, setCount] = useState(0);

  // Preserves the same object reference across renders
  const config = useMemo(() => ({ title: "Dashboard" }), []);

  // Preserves the same function reference across renders
  const handleClick = useCallback(() => console.log("Clicked"), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Counter: {count}</button>
      <HeavyChild config={config} onClick={handleClick} />
    </div>
  );
};

2. Preserving Referential Identity (useCallback & useMemo)

To stop parent updates from generating new memory references and ruining React.memo, you must explicitly stabilize non-primitive props.

• useCallback: Caches a function definition between renders.
  • It returns the exact same function instance in memory unless its dependency array updates.
• useMemo: Caches the result of a calculation or a complex object/array creation.
  • It avoids running expensive logic and preserves the reference across renders.

const HeavyChild = React.memo(({ config, onClick }) => {
  return <button onClick={onClick}>{config.title}</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  // 1. Stable object reference across renders
  const config = useMemo(() => ({ title: "Dashboard" }), []);

  // 2. Stable function reference across renders
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Counter: {count}</button>
      {/* HeavyChild successfully SKIPS re-renders now */}
      <HeavyChild config={config} onClick={handleClick} />
    </div>
  );
};

3. Custom Comparison Functions

When stabilizing references in the parent component is impractical (or when dealing with deeply nested object props), React.memo accepts a custom comparator function as its second argument.

• Return true to skip the render (props are equal).
• Return false to run the render (props changed).

// Compare specific nested values directly instead of memory references
const HeavyChild = React.memo(
  ({ user }) => <div>{user.profile.details.name}</div>,
  (prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);

4. Performance Overhead & Trade-offs

Memoization is not a free performance boost; every hook and HOC adds runtime overhead:

• Memory: Storing dependency arrays and old prop trees in memory.
• CPU: Running shallow equality checks on every parent update.

When to skip memoization:

• The child component is cheap/fast to render.
• The props change on almost every render (the equality check runs, fails, and re-renders anyway—costing more than doing no check at all).
• The issue can be solved cleanly via element composition (e.g., children prop) without hooks.

Summary Architecture Matrix

Tool	What It Caches	When to Use It
React.memo	Rendered DOM / Component Output	Heavy components rendered frequently with identical props.
useCallback	Function Instance	Passing callbacks into React.memo wrapped child components.
useMemo	Value / Object Reference	Preserving object references for React.memo OR caching expensive calculations.