When to optimize (memo idea)
📚 What is React.memo and When to Optimize? React re-renders a component whenever its parent re-renders, even if the component's own props didn't change. React.memo wraps a component and tells React: 'only re-render this if the props actually changed.' It's a performance optimization you add AFTER …
Appy Says…
Every time a parent re-renders, all its children re-render too — even if their props didn't change. React.memo short-circuits this: if the props are the same, the component skips re-rendering entirely. This is React's first performance tool.
What is React.memo?
React.memo is a Higher Order Component that wraps another component and memoises it. If the props haven't changed (shallow comparison), React skips the re-render.
- •
const MemoCard = React.memo(Card); - •Or:
export default React.memo(function Card({ title }) { ... }) - •Shallow comparison: checks each prop with ===
- •If props equal → skips render, returns cached output
- •useMemo: memoises a computed value inside a component
- •useCallback: memoises a function so it doesn't change reference on each render
Think of it like cached chunk rendering in Minecraft
Minecraft only re-renders chunks near you or when blocks change. It caches distant chunks and skips re-rendering them unless something changes. React.memo does the same for components — cache the output and only re-render when props actually change.
How It Works
- •1. Wrap:
const OptimisedList = React.memo(HeavyList); - •2. React compares old props vs new props with === for each key
- •3. All same → skip render, return last output
- •4. Any changed → re-render normally
- •5. Custom comparison:
React.memo(Component, (prev, next) => prev.id === next.id) - •6. useCallback on callback props prevents them from breaking memo:
const handleClick = useCallback(() => ..., [deps])
Real-World Examples
- •Expensive chart component: wrap in memo — only re-renders when data prop changes
- •100-item list: memo each row — parent scroll state change doesn't re-render all rows
- •Applaa lesson card: memo'd so the lesson list doesn't re-render all cards when one completes
- •Header component: memo'd so it doesn't re-render when page body state changes
Key Facts
- •Don't premature-optimise — React.memo adds overhead for cheap components
- •Memo is only effective if the parent passes the same prop references; useCallback prevents callback reference changes
- •React DevTools Profiler shows render count and helps identify which components need memo
- •React 19's compiler (React Forget) will add automatic memoisation — manual memo may become obsolete
Watch Out!
React.memo uses shallow comparison. If you pass an object or array as a prop (config={{ size: 'lg' }}), it creates a NEW reference on every parent render — breaking memo. Memoize the object with useMemo or define it outside the component.
Remember
React.memo skips re-renders when props are shallowly equal. Use for expensive components with stable props. Pair with useCallback for callback props to prevent reference changes breaking the memo.
What You Learned
- •React.memo wraps a component and skips re-render when props are shallowly unchanged
- •Pair with useCallback for function props; useMemo for computed object/array props
- •Unlocks: optimising lists, expensive components, reducing wasted renders
Key Facts
- →Don't premature-optimise — React.memo adds overhead for cheap components
- →Memo is only effective if the parent passes the same prop references; useCallback prevents callback reference changes
- →React DevTools Profiler shows render count and helps identify which components need memo
- →React 19's compiler (React Forget) will add automatic memoisation — manual memo may become obsolete
Real-World Examples
Remember
React.memo skips re-renders when props are shallowly equal. Use for expensive components with stable props. Pair with useCallback for callback props to prevent reference changes breaking the memo.
Quick Quiz
React.memo helps?