Quick Summary
When the application is growing bigger, harder to find a component rendering for a single action. When I face this issue I tried lots, but the simple is always better. So I came up with my own solution.
Repo: https://github.com/NaveenDA/react-rerender-test
Demo: https://st8rc.csb.app/
React follows a very general rule, that is “A Component will re-render if the state or props is changed”
A typical application having more than 10 components, most of them arranged in a parent-child relation pattern. So when State/Props changes in Parent that will rerender all those child component linked within it.
Trail and Errors
When I face these re-rendering issue, I decided to go with a simple method which simply print-out the number times component re-rendered
Trail 1
A component simply print on the console with a number of times, for each and every re-rendering of the component
Trail 2
Console prints are better, but visualisation is always better, so I decided to see it on the browser window.
So that I create a component, that changes color for every re-rendering of the component.
This will create an output something like these
Solution
By Combine, both trails can able to detect the react component re-render in a simple manner.
I export that component as the npm-package so that everyone can use
Install the npm-package
npm i react-rerender-testLet us create a simple click count component.
In the AnotherPage Component, include the `react-rerender-test` component.
Every time, button clicks we increase the count which means we change the state so that react will re-render the child component (AnotherPage). Even, the `AnotherPage` component doesn’t change any state; it will re-render because-of parent state is changed.
If you want to try this out, please make use of this code sandbox
React-rerender-test component source code can be found in https://github.com/NaveenDA/react-rerender-test
Thanks for sticking until the end :)
P.S. 👋 Hi, I’m Naveen DA! If you liked this, consider following me on Twitter and sharing the article with your developer friends 🐋😀
