React.memo

React.memo

React.memo is a higher-order component that prevents a functional component from re-rendering if its props have not changed, helping optimize performance in React Native applications.

Basic Usage

How React.memo Works

React.memo performs a shallow comparison of the previous and new props. If they are equal, React skips re-rendering the component and reuses the last rendered output.

Combining with useCallback and useMemo

React.memo is most effective when combined with useCallback and useMemo for any function or object props, since new object or function references on every render would otherwise defeat the shallow comparison.

Custom Comparison Function

React.memo accepts an optional second argument, a custom comparison function, allowing fine-grained control over exactly which prop changes should trigger a re-render.

When to Use React.memo

React.memo is most beneficial for components that render frequently with the same props, particularly items within large lists like FlatList, where unnecessary re-renders can noticeably impact scroll performance.

When React.memo Does Not Help

If a component’s props change on nearly every render anyway, wrapping it in React.memo provides no benefit and adds a small unnecessary comparison overhead.

Conclusion

React.memo, combined properly with useCallback and useMemo, is a powerful tool for reducing unnecessary re-renders in React Native applications, particularly valuable for optimizing list item components.