Memoization and useCallback

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 1

Stabilise a Callback with useCallback

React.memo is broken by a new function reference every render — useCallback fixes it.

Counter — handleSave recreated every render

Counter state: 0

SaveButton (memo'd) renders: 1

This button is wrapped in memo — it should only re-render when its props change. But it still flashes every time the counter changes.

Click the +1 / −1 buttons. SaveButton flashes on every click — even though it only cares about handleSave, which does the same thing every time.

Test Your Understanding

Multiple choice — select an answer to see the explanation.

1 / 4

Why do inline function handlers break React.memo on child components?