React › React DevTools & Debugging

How would you use React DevTools to find out why a component re rendered when you did not expect it to?

Advanced

Answer

React DevTools has a setting to highlight updates when components re render, showing a colored outline flash around any component that just re rendered. The Profiler tab can also show the specific reason for each re render, such as a prop change or a state update, helping you track down unnecessary re renders.

// Enable this setting inside React DevTools
// Components tab settings, check 'Highlight updates when components render'
// Then interact with your app and watch for unexpected flashing components

Real-world example A team notices a large sidebar flashing every time a user types into an unrelated search box, and traces the unnecessary re render back to a Context value that was being recreated on every render.

Common follow-ups: What commonly causes a component to re render even when its own props have not changed?;How do you fix a re render caused by a new object or function being created on every render?

Performance (memo/useMemo);Effects & Lifecycle