React-devtools: Component Lifecycle Transaction Logs

[bizmurr]

It would be really nice to be able to view a transactional log of what components are being rendered.

For example having something like: https://github.com/TrySpace/ReactDebugMixin, but allowing it to attach to all components.

I think this would be super useful so you can watch the log to debug situations where you could be setting state and unknowingly causing double renders to happen. Like you have a component listening to a store but maybe it only needs to listen to an action and not all the changes in the store.

Component 1 mounted...
Component 1 updated...
Component 1 updated...
Component 1 unmounted...

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[jaredly]

With the new devtools, it's pretty easy to roll this on your own. In the console (or anywhere in your javascript, really), you can do:

__REACT_DEVTOOLS_GLOBAL_HOOK__.on('update', function (args) {
  var data = args.data;
  if (data.nodeType === 'Composite') {
    console.log(data.name + ' updated');
  }
})

Note that the logging will happen only when the react devtools are running.

At the moment, I'm not sure this warrants addition to the devtools UI, given the script is so simple.
Is this something you want frequently, or is it seldom enough that a one-off script like this will suffice?

[davidspiess]

I think something like https://github.com/redsunsoft/react-render-visualizer would add great value to the devtools. It would be immediately clear which components render how often. As there is already the awesome bananaslug plugin which highlights rerendered content, maybe it could be extended to show the amount of render calls next to the DOM node?

[sophiebits]

@davidspiess I think @gaearon wanted to do that. :)

[natew]

Just wanted to add a vote of support as it's been a few years without update. Seeing a granular log that worked across classes and hooks, showing the exact hook/setState that triggered an update should be extremely helpful!

[Jessidhia]

The Profiler is pretty close to being able to do that. It can show you which components updated, and if you are using the scheduler interaction API it can show the user-defined interaction that caused the update, but it could be made more useful by recording / showing the stack that caused React to schedule an update.

[natew]

It really isn’t quite the same. Seeing both the order and the specific
prop/state/hook that triggered are hugely helpful. For now I hooked into
the hidden event but that also doesn’t show much besides the component
name.

On Tue, Jan 22, 2019 at 4:23 AM Jessica Franco [e-mail]
wrote:

The Profiler is pretty close to being able to do that. It can show you
which components updated, and if you are using the scheduler interaction
API it can show the user-defined interaction that caused the update, but it
could be made more useful by recording / showing the stack that caused
React to schedule an update.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-devtools/issues/79#issuecomment-456380944,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAvREAznmGHHQActkMOYB5rMqnTyKZ0ks5vFwLZgaJpZM4DxIyH
.

[bvaughn]

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