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!.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |