facebook/react-devtools

Feature Request: show which components changed during rerenders

Closed this issue · 3 comments

I'd love to have a feature in the devtools which has a dedicated tab for output of props

e.g.


TodoList: prevProps -> nextProps


you could click on TodoList and it'd take you to that exact component within the devtools react inspector

if you click on prevProps or nextProps it would twiddle down into a list of the props.

I'm currently dealing with optimizing useless renders for things like arrays and objects passed as props which are always unique on the next render so a feature like this would help me track down which components need optimizing a lot.

also, so its not super noisy it would be ideal to have a search feature so you could search by a component name e.g. if I type "Todo" it'd filter the list of rerenders by that name and return Todo, TodoList, etc.

@lifeiscontent this tool would might help you: https://github.com/welldone-software/why-did-you-render
There is the "Highlight Updates" feature, but it would be nice having a log of rerenders as well.

I would love to see something like this too: https://github.com/React-Sight/React-Sight

@renancaldas I saw that but it doesn’t have support for hooks

Sent with GitHawk

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools