Memoization with React.memo, useCallback, useMemo
Wrap expensive child components with React.memo, stabilize callback props with useCallback, and cache derived values with useMemo to prevent redundant renders.
Why Components Re-Render
In React, a component re-renders whenever its parent re-renders, its state changes, or its context changes. When a parent re-renders, all child components re-render by default — even if their props have not changed. For a list with 50 items, this means 50 re-renders on every parent state change.
Memoization is the technique of caching the result of a computation and returning the cached result when the inputs have not changed. React provides three memoization tools: React.memo, useCallback, and useMemo.
React.memo for Component Memoization
React.memo is a higher-order component that wraps a functional component and prevents re-renders when the component's props have not changed (using shallow equality comparison). If the parent re-renders but passes the same props, the memoized child is skipped.
Wrap a component with React.memo when it receives stable props and is expensive to render. Row components in a FlatList are the classic use case — they receive the same item data on every parent scroll event.
import React from 'react';
import { View, Text } from 'react-native';
interface PostRowProps {
title: string;
author: string;
}
// Without memo: re-renders on every parent update
// function PostRow({ title, author }: PostRowProps) {
// With memo: skips re-render if title and author are unchanged
const PostRow = React.memo(function PostRow({ title, author }: PostRowProps) {
return (
<View>
<Text>{title}</Text>
<Text>{author}</Text>
</View>
);
});
export default PostRow;All lessons in this course
- Profiling with Flipper and React DevTools
- Memoization with React.memo, useCallback, useMemo
- FlatList Performance Tuning
- Bundle Size and Lazy Loading