Explain React.memo optimization strategies

Question

Accepted Answer

**React.memo** prevents re-renders when props haven't changed via shallow comparison. But just wrapping a component in React.memo isn't enough — you need the right strategies to make it effective. **Strategy 1 — Basic memoization:** ```tsx const ExpensiveComponent = React.memo(({ data, onSelect }) => { // Expensive render logic here const processed = data.map(item => ({ ...item, computed: heavyCalculation(item), })); return (

onSelect(item.id)}> {item.name} - {item.computed}

); }); ``` **Strategy 2 — Custom comparison function:** When shallow comparison isn't enough (e.g., you want to ignore certain props): ```tsx const UserCard = React.memo( ({ user, onClick, lastUpdated }) => (

{user.name}

{user.email}

), (prevProps, nextProps) => { // Only re-render if user.id or onClick changed // Ignore lastUpdated prop entirely return ( prevProps.user.id === nextProps.user.id && prevProps.onClick === nextProps.onClick ); } ); ``` **Strategy 3 — Combine with useCallback for functions:** ```tsx function Parent() { const [count, setCount] = useState(0); // BAD: new function every render = memo child always re-renders const handleClick = () => console.log("clicked"); // GOOD: stable reference = memo child skips re-render const handleClick = useCallback(() => { console.log("clicked"); }, []); return (

); } const MemoizedChild = React.memo(({ onClick }) => { console.log("Child rendered"); return ; }); ``` **Strategy 4 — Split contexts to limit re-render scope:** ```tsx // BAD: one context for everything — all consumers re-render on any change const AppContext = createContext({ theme, user, settings, notifications }); // GOOD: split into separate contexts const ThemeContext = createContext(theme); const UserContext = createContext(user); const SettingsContext = createContext(settings); // Now each consumer only re-renders when its specific context changes ``` **Strategy 5 — State colocation:** ```tsx // BAD: filter state at top = all children re-render on every keystroke function App() { const [filter, setFilter] = useState(""); return ( <> ); } // GOOD: move state to where it's needed function SearchableList() { const [filter, setFilter] = useState(""); return ( <> ); } ``` **Decision framework — when is React.memo worth it?** 1. Is the component **re-rendering frequently** when it shouldn't? (Check with Profiler) 2. Is the render **expensive** (computation, large tree)? 3. Can you **stabilize the props** with useCallback/useMemo? If all three are yes → use React.memo. Otherwise, it's premature optimization.

React: Explain React.memo optimization strategies