TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

React Stable Values and Performance

1 post · Aug 2022

What this trail covers

This feature thread tracks the development and enhancement of understanding and implementing stable values in React, particularly within the context of functional components and hooks. Initial efforts focused on identifying common pitfalls related to unstable values in dependency arrays of hooks like `useEffect`, `useCallback`, and `useMemo`, as well as the performance implications of unstable inline functions used as components. The thread also delves into the nuances of memoization in React, covering the correct terminology and judicious use of `useCallback` and `React.memo` to optimize performance and prevent unnecessary re-renders.

All Shopify trails
  1. Mastering React’s Stable Values - ShopifyThis post clarifies the concept of stable values in React, explaining how `useState`, `useReducer`, and `useRef` provide stable functions or objects. It highlights the instability of array and object literals, and inline functions created on every render. The post emphasizes the importance of stable values for hook dependencies (`useEffect`, `useCallback`, `useMemo`) and `useFocusEffect`, explaining how unstable dependencies lead to unintended re-executions. It also details the performance pitfall of treating inline functions that return components as actual components, leading to unnecessary re-creation of native views. The post advocates for defining components in the global scope and judiciously using `useCallback` when passing functions to memoized components.