React Developer Tools

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

One State Object, Three Re-renders

See what DevTools would highlight — changing one setting re-renders all three panels.

SettingsPanel — one shared state object

ThemeSelector

renders: 1

LanguageSelector

renders: 1

NotificationToggle

Notifications enabled
renders: 1

Change theme. DevTools would highlight ALL three panels — ThemeSelector, LanguageSelector, and NotificationToggle all re-render because the whole settings object is replaced.

Re-read the lectureAll lectures →