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

Reactjs Beginner

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

Rajdeep Singh
FrontEnd web
Published in
2 min readJun 17, 2024

--

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.

--

--

Rajdeep Singh
FrontEnd web

Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | https://linktr.ee/officialrajdeepsingh