Academy
mediumReact Native#16

React.memo and useMemo

Prompt

Create an expensive computation (factorial calculation) and memoize it with useMemo. Wrap the display component in React.memo to prevent re-renders when its props haven't changed.

Solution

const factorial = useMemo(() => {
  let result = 1
  for (let i = 2; i <= count; i++) result *= i
  return result
}, [count])
const MemoDisplay = React.memo(ExpensiveDisplay)
return (
  <View>
    <MemoDisplay value={factorial} />
    <Button title="+" onPress={() => setCount(c => c + 1)} />
  </View>
)
Mentor's take

These are two different tools that interviews love to see distinguished. useMemo caches a value: the factorial recomputes only when count changes, so unrelated re-renders (a theme toggle, a parent update) skip the loop. React.memo caches a render: it shallow-compares props and bails out of re-rendering the child when they're referentially equal. They compose — useMemo keeps the prop stable, React.memo uses that stability to skip the render. Break either half and the other stops paying: a memoized child receiving a fresh inline object or arrow function every render re-renders every time, comparison cost included.

On React Native this matters more than on web because the JS thread is also the thread that feeds animations and touch responses — wasted render work there is dropped frames, not just CPU heat.

The honest senior position: memoization is not free. The comparison runs on every render, the cached value holds memory, and the deps array is a new bug surface. Memoize expensive computations and hot paths (list rows, children of frequently-updating parents) — after observing the problem, not preemptively. Note one subtlety: React.memo(ExpensiveDisplay) should live at module scope in real code; recreating the wrapper inside a render defeats it.

Red flag: "I wrap everything in memo for performance." That's cargo-culting — comparisons cost, and unstable props defeat it silently.

Say it: "useMemo stabilizes a value, React.memo skips a render off that stability — they only pay together, and I apply them where profiling shows re-render cost, not by default."