Memoisation in React

Memoisation in React — React Tutorial - HTML5ANDCSS3

const Child = React.memo(function Child({ label, onAction }) {
  const renders = React.useRef(0)
  renders.current++
  return <p>{label} rendered {renders.current} times</p>
})

function App() {
  const [tick, setTick] = React.useState(0)

  // New function every render — memo cannot match it.
  const unstable = () => {}

  // Stable identity across renders.
  const stable = React.useCallback(() => {}, [])

  return (
    <div>
      <button onClick={() => setTick(tick + 1)}>Re-render parent ({tick})</button>
      <Child label="With inline arrow" onAction={unstable} />
      <Child label="With useCallback" onAction={stable} />
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

Skipping real work

jsx

function slowTotal(n) {
  let total = 0
  for (let i = 0; i < n * 200000; i++) total += i % 3
  return total
}

function Demo() {
  const [size, setSize] = React.useState(1)
  const [tick, setTick] = React.useState(0)

  // Recomputed only when size changes, not when tick does.
  const total = React.useMemo(() => slowTotal(size), [size])

  return (
    <div>
      <p>Total: {total}</p>
      <button onClick={() => setSize(size + 1)}>Change size ({size})</button>{" "}
      <button onClick={() => setTick(tick + 1)}>Unrelated re-render ({tick})</button>
      <p style={{ color: "#64748b" }}>
        The second button re-renders without redoing the work.
      </p>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Demo />)

The three tools

Why memo alone often does nothing

useMemo for expensive work

Measure before optimising