How to check which component Re-render in react js?

Reactjs Beginner

How to check which component Re-render in react js?

Check which component re rendered again and again in your reactjs application.

--

For reactjs developers, the most crucial task is to find which component renders again and again in your reactjs application. Hence, we prevent memory leaks, and website performance issues on the website.

How to check which component is re rendered in reactjs?

You need to install the React dev tool in your browser to check which component is re-rendered.

After installing React DevTools, Then open the dev tool, go to the components tab, and click the settings icon.

Click on the settings icon on the dev tool.

After, you need to enable the Highlight updates when components render in the general setting tab in dev tools.

Enable the Highlight updates when components are rendered in the Chrome dev tool.
Enable the Highlight updates when components are rendered in the Chrome dev tool.

Now you can see the border that tells which component is re-render on your reactjs website.

Check which component re-render.
Check which component re-render.

If you don’t open the developer tools (dev tools), you won’t see any borders on the website.

Conclusion

To enable the Highlight updates when components render option in the dev tool, it tells you which component is re-render, but it can not tell you what is the reason for a component’s re-render

To find why your component is re-rendering, go to settings > profiler and enable the “Record why each component rendered” option.

Enable the “Record why each component rendered” option.
Enable the “Record why each component rendered” option.

Now you can understand the cause with the profile tool why your component re-renders in the React app.

To learn more about frontend developers, reactjs, nextjs, and Linux stuff, follow the frontend web publication on Medium and other updates. You can also follow me on Twitter (X) and Medium.

--

--

Rajdeep Singh
FrontEnd web

JavaScript | TypeScript | Reactjs | Nextjs | Rust | Biotechnology | Bioinformatic | Frontend Developer | Author | https://linktr.ee/officialrajdeepsingh