You'll notice that sometimes the reason is not very detailed - simply saying 'hook changed' instead of the details of what hooked changed.

'This is the first time the component rendered.'.

Possible values you can expect to see as reasons for a component rerendering: Hovering over each component will reveal why it rendered in the 'Why did this render?' subheading.

The 'Flamegraph' shows the component tree and what changed - 'grey' means the component did not rerender.

In the top right you have the number of React commits - each bar represents a moment when the React component tree changed and a change was commited to the DOM.

To see this, you need to record a 'Profiler' session.įor example, if you your component re-renders after you click a button, you can click record to start profiling, click the button in question, then stop profiling and see the details of what happened when the button was clicked. There's a very handy tooltip that shows up when hovering over a component in the 'Flamegraph', that shows the reason for a render under the 'Why did this render?' heading. Now that you can see your component rerendered, the next question is.

Then just interact with your app as usual and watch it all light up ✨ Using React DevTools to find out the cause of a rerender To enable it, go to 'Profiler' > click the 'Cog wheel' on the right side of the top bar > 'General' tab > Check the 'Highlight updates when components render.' checkbox. There's a checkbox well hidden in the React DevTools settings that allows you to visually highlight the components that rerendered. Using React DevTools to highlight what components rerendered Then it's time to use the React DevTools! Not only do they allow you to visually see what components rerender, but you can also investigate what caused each rerender and easily spot what components are taking longest to render. This can work fine at the beginning - but what if you want to answer bigger questions about your app - like whether using Context has an impact on the performance of your app? Or simply, what if you're tired of scrolling through tens of console.logs figuring out what executed when? If you're like me, you're probably using console.log a lot to check the React rendering lifecycle of your components 😅 When it rerendered, why - was it a setState or something else ?! - or even just to get a better handle of React fundamentals. 4 min read How to check if your component rerendered - and why!.

Reactjs find