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. Theref