The True Face of Referential Equality and Optimizations in React

When performance issues arise in React applications, React.memo, useMemo, and useCallback are usually the first things that come to mind. In practice, however, adding these tools often merely complicates the code without delivering the expected performance boost.

The underlying reason isn't that React is inadequate, but rather a fundamental misunderstanding of referential equality within React's render model and how these optimization tools actually work.

React's Decision Mechanism: Value vs. Reference

When deciding whether to re-render a component, React doesn't check the contents of the data (structural equality). Instead, it checks if the data points to the same location in memory (referential equality). It uses a shallow comparison similar to JavaScript's Object.is() method.

const a = { value: 1 };
const b = { value: 1 };

console.log(a === b); // false

In the example above, even though objects a and b have identical content, they point to different memory locations. Therefore, React considers them completely different values. This becomes critical especially when objects, arrays, and functions are passed as props to child components.

The Shallow Comparison Preference

React.memo, PureComponent, and Hook dependency arrays intentionally perform a shallow comparison. If React were to deeply compare every property within objects during every render, the performance cost would be significantly higher.

const Child = React.memo(({ options }) => {
  /* ... */
});

const Parent = () => {
  // A new 'options' object is created in memory during every render.
  const options = { pageSize: 20 };

  return <Child options={options} />;
};

In this example, every time the Parent component renders, a new options object is created in memory. Even though the Child component is wrapped in React.memo, the optimization cannot kick in because the reference of the options prop has changed, causing the Child to re-render unnecessarily.

Impact on the Reconciliation Process

In React, rendering does not mean directly updating the DOM. During the render phase, React generates a new component tree (Fiber tree) and compares it with the previous one (Reconciliation).

If a component's state or prop references have changed, React re-renders that component and its entire subtree. Even if there are no actual changes to the DOM, constantly changing references force React to perform this comparison repeatedly, wasting CPU cycles.

Why useMemo and useCallback Fall Short

These two Hooks are designed to keep references stable (memoization), but when implemented incorrectly, they only add overhead to the application.

• The Limits of useMemo: useMemo is used to cache expensive calculations or keep references stable. However, if a value in the dependency array changes its reference on every render, the calculation inside useMemo will re-run every time. In this case, not only does the optimization fail, but React is also burdened with the extra work of tracking these dependencies.
• The Role of useCallback: useCallback caches function definitions. But if a function depends on a frequently updated state (e.g., state changing on every keystroke in a text input), this function will be recreated with every keystroke. Passing this function as a prop to child components will cause them to continuously re-render as well.

Every Render Creates Its Own Scope (Closures)

In React, every render creates its own lexical scope. This means that during each render, a "snapshot" of the current state and prop values is taken.

Functions within a component capture the values belonging to that specific render. When the state updates, the component re-renders, a new snapshot is taken, and naturally, brand-new functions working with these new values are created in memory. This is React's expected behavior.

Architectural Solutions Over Forced Optimization

Instead of trying to forcefully stabilize references using useMemo and useCallback, rethinking the component architecture is often a more permanent and cleaner solution.

• Moving State Down: If a piece of state only affects a specific child component, move that state directly into the child rather than keeping it in the parent. This prevents the parent from rendering unnecessarily.
• Lifting Content Up (Children Prop): By passing expensive components to a parent via the children prop, you can ensure that the child components are unaffected when the parent's state changes.
• Using Primitive Values: Instead of passing an entire object to child components as a prop, pass only the necessary primitive values like string, number, or boolean. Primitives are always compared by value, not by reference.

React.memo, useMemo, and useCallback are not magic wands. These tools only provide benefits in applications where the architecture and data flow are properly structured. If you are experiencing performance issues, rather than immediately reaching for these Hooks, it is much better to ask architectural questions like, "Where should this component's state live?" or "Do I really need to pass this prop?"