I have a suspicion that my React app is re-rendering a lot of ponents due to some unknown errors in my code. I want to be made aware each time any of my ponents re-render.

I can go into each ponent and add a console log at the top of each render method but that would be time consuming since there are a lot of ponents and I would have to do this each time I add a new one.

Is there any "catch all middle-ware" that can be run right before any React ponent is about to render/re-render? One that sit's globally in one place and works for all ponents across the board?

I have a suspicion that my React app is re-rendering a lot of ponents due to some unknown errors in my code. I want to be made aware each time any of my ponents re-render.

I can go into each ponent and add a console log at the top of each render method but that would be time consuming since there are a lot of ponents and I would have to do this each time I add a new one.

Is there any "catch all middle-ware" that can be run right before any React ponent is about to render/re-render? One that sit's globally in one place and works for all ponents across the board?

• javascript
• reactjs

• 1 This document can lead you onto the right path. reactjs/docs/perf.html – Nathan Koop Commented May 4, 2018 at 15:44
• 1 You can use the chrome react extension and click "highlight updates" – corvid Commented May 4, 2018 at 17:08

2 Answers 2

why-did-you-update is deprecated, here is the latest lib: @welldone-software/why-did-you-render

Is there any "catch all middle-ware" that can be run right before any React ponent is about to render/re-render? One that sit's globally in one place and works for all ponents across the board?

I know about one. why-did-you-update.