Menu
I'm working on something and a piece of my code is a bit slow, what I think happens is that the component re-render too many times for no reason.
Is there any way to check how many times a component re-renders in react(or react-native for the matter)?
What i've tried to do is put a console.log after the render method and count how many there are but i'm not sure if that would work.
Thanks in advance!
391
Using React DevTools to highlight what components rerendered 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.
React DevTools lets you highlight renders under Components -> View Settings -> Highlight updates when components render. This will show you the virtual renders. If you want to see native re-renders, you can do so in the Chrome DevTools, under the three-dot menu on the right -> More tools -> Rendering -> Paint flashing.
1. Memoization using useMemo() and UseCallback() Hooks. Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
you can place console.count('counter') in your render function to check this. Here you'll find all the details about console.count link
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
