The Two Rules of React Performance

Every yellow flash is a re-render. Interact with the demo, spot what shouldn't be flashing, then open the solution tab to see the fix.

1

Exercise 1 of 1

Spot the Unnecessary Re-renders

See which components re-render on every keystroke — and why.

My Apprenders: 1

UserProfile

👤 John Doe

renders: 1

RecentActivity

  • Opened dashboard
  • Updated profile
  • Viewed report
renders: 1

SearchResults

  • Apple
  • Banana
  • Cherry
  • Dragonfruit
  • Elderberry
renders: 1

💡 Type anything. Header, UserProfile, and RecentActivity all flash — they re-render on every keystroke even though they don't use query.

Re-read the lectureAll lectures →