Mastering React’s Stable Values - Shopify

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