React Performance in the Real World

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

1

Exercise 1 of 1

Diagnose and Fix Three Common Performance Problems

A broken dashboard with three simultaneous issues — match each symptom to the right tool and watch all three disappear.

Dashboard — three performance problems

Controls

ActionButton (memo'd) renders: 1

Should render once — but inline handler breaks memo.

SortedList renders: 1

Showing 200 items (expensive sort on every render)

Issues: (A) ActionButton flashes on every Tick despite memo, (B) SortedList re-sorts on every render, (C) input feels sluggish while filter runs synchronously.

✦

Test Your Understanding

Multiple choice — select an answer to see the explanation.

1 / 4

What is the "agony" metric for prioritising React performance work?

Re-read the lectureAll lectures →