Memoizing List Items with `React.memo`

WHY IT EXISTS In a React Native FlatList, the parent component might re-render for many reasons, triggering a re-render of all its visible children—even if the data for those children hasn't changed. This wastes CPU cycles, leading to janky scrolling and a less responsive interface.

THE MENTAL MODEL Think of React.memo as a gatekeeper for your component's render function. Before every potential re-render, memo intercepts the new props and does a quick, shallow comparison against the previous props. If nothing has changed, it tells React to skip the render entirely and reuse the last rendered result. It's a "do-not-disturb" sign for components with stable props.

HOW IT WORKS You wrap your functional component in React.memo(). When its parent tries to re-render it, React first performs a shallow comparison of the component's current props and its next props. If they are the same, React bails out of the render, saving the cost of running the component function and reconciling its output. If the props are different, the component re-renders as usual. This check happens automatically on every potential update.

WHEN TO USE IT The primary use case is for components in a long list, like a FlatList. If your list items are pure—meaning their output depends only on their props—and they are rendered frequently with the same props, memoization provides a significant performance boost. It prevents items that are already on screen from re-rendering just because you scrolled or the parent state changed.

WHEN NOT TO USE IT Avoid memo on components whose props are almost always different on every render. In this case, the prop comparison is wasted overhead. Also, be careful when passing non-primitive props like objects, arrays, or functions. A new function or object created in the parent's render cycle (e.g., onPress={() => {}}) will always fail the shallow comparison, making memo useless. You must ensure these props are stable, for instance by using useCallback for functions.

ONE CANONICAL EXAMPLE A FlatList renders product items. The ProductItem component receives props like name, price, and imageUrl. Without memoization, if a filter state in the parent component changes, every visible ProductItem might re-render. By wrapping it, const MemoizedProductItem = React.memo(ProductItem);, and passing it to the FlatList's renderItem prop, an item only re-renders if its own props change, keeping scrolling smooth even when other parts of the UI are updating.