Mastering React’s Stable Values - Shopify
8/2/2022
This post introduces the concept of 'stable values' in React, defining them as values that maintain the same reference across multiple renders. It details how `useState` and `useRef` provide stable values, while array and object literals, as well as anonymous functions, are unstable by default. The post highlights the performance implications of unstable values in hook dependency arrays (`useEffect`, `useCallback`, `useMemo`) and the critical performance pitfall of treating unstable inline functions as components. It emphasizes using `useCallback` and `useMemo` to create stable values and advocates for defining components in the global scope to ensure stability and prevent unnecessary re-renders. The post also clarifies the technical distinction between memoization and caching in React.