Referential equality

Summary

React.memo, useMemo, selectors use === — new object each render defeats memoization even if values equal. Stabilize object/array props with memoization or hoist constants. TanStack Query structural sharing preserves references when data unchanged. Debug with why-did-you-render or React DevTools.

Code example

const Chart = memo(function Chart({ data, onSelect }) {
  return <canvas ref={(c) => draw(c, data)} />;
});

// Parent must stabilize props:
const handleSelect = useCallback((id) => select(id), [select]);

Key points

• React.memo, useMemo, selectors use === — new object each render defeats memoization even if values equal.
• Stabilize object/array props with memoization or hoist constants.
• TanStack Query structural sharing preserves references when data unchanged.
• Debug with why-did-you-render or React DevTools.

Further reading

• memo
• useMemo

Related concepts

• Immutable data patterns
• Memoization pitfalls