[DevTools] show state history like redux devtools does for actions and more

feature request

Nowadays we migrate much of our use-cases from complexes of high order redux actions+ HO selectors + HO reducers (I call it HOXes) to react hooks. Hooks allow us easier to incapsulate blocks of functionality rather it was possible with redux infrastructure, when we had to use our complex complexes to avoid much of copy-paste.

One drawback is lack of history of changes and more poor devtools at all. We creates many useDebugValue helpers, loggers and so one now.

expected behavior?

• show history of hook state changes with dom and js stack traces, diffs and maybe even history traversing
• allow more precisely editing of values in devtools. Currently I cannot choose number or string or bool or object when I edit prop or state value
• allow copying the state name in devtools (remove css no-action pls)
• add something like $r.state back
• preview complex values brifely like chrome devtools does it for arrays, sets, maps, objects,

I wrote related twit recently with one my DebugValue helper

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? all are latest

[bvaughn]

I’ve responded before on why I don’t think React DevTools can add a Redux-like props/state history, but I’m having trouble finding the post.

Essentially it comes down to the fact that in JavaScript, a lot of state is mutable- so storing a copy of a previous value would not be possible without deeply copying (and even the, some mutable globals can’t be copied).

It would also add a lot of memory overhead and storing old closures would require retaining all of their references, preventing things from being garbage collected.

I’m going to close this issue because I don’t think it’s something we can (or should) take action on. Happy to continue discussing it here though if there are questions.

You may consider opening a new issue for this bullet:

• preview complex values brifely like chrome devtools does it for arrays, sets, maps, objects,

I don’t think I will have any time to work on it, but if someone wanted to contribute a PR I can try to find time to review it.

[qmg-akara]

Thanks @bvaughn At least, would it be possible to have a history of the changed props? Something similar to WebStorm debug tool, the changed variables are highlighted when a breakpoint is hit for the second time. Something similar to the following table, first row is the component data at initial render and the second row is for the next re-render and so on. Primitive values can be copied I think, and if the prop is an object or function then Object, Class or Function name should be enough to display. Indeed, even just the prop names and Hook ids would be helpful for debugging purposes. That’d be helpful to see which props might cause re-renders.