memo, useCallback, and useMemo: When They Help and When They Don't

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

1

Exercise 1 of 1

Stop Re-renders with memo + useCallback + useMemo

An expensive MarkdownPreview re-renders every time the parent updates — even when nothing it cares about changed. Wrap it with memo, stabilise the function with useCallback, and the object with useMemo.

Without memo/useCallback/useMemo (janky)

Editor renders: 1

← click this, watch Preview re-render

MarkdownPreview renders: 1

Hello world
Type here to edit.