Props objects are uncollapse and collapse themselves if you try to expand them.
Closed this issue · 8 comments
Basically, I have a context provider with values which are objects, functions, primitive values.
When I try to expand any of the nested fields in context provider it starts to uncollapse and collapse itself.
It used to be like that for a long time, for a month at least. I was connecting it with alpha React, but right now it's a release version and it still broken so I come to report.
Here is the GIF with it. Not enough FPS to show it better, but I think you will get what is the problem.
https://cl.ly/8b05bb5e932b
Here is the video:
https://cl.ly/ee565918ef65
It's quite random, so it's not really only in Context providers, but for example all connect functions and their context section are affected, but sometimes just regular components props are affected.
Usually first uncollapse is ok, and any uncollapse deeper starts the glitch.
It used to have some error console output on each of the uncollapse/collapse but it's gone since a week or so.
Please help, I forced to use console.log everywhere to debug things :(
In my experience, the object browser on the right collapses when the component updates. Could it be that your components are updating unnecessarily on some interval?
@matt-tingen is right. The reason for this is how we're shallowly serializing data when sending it from the page context (where React runs) to the DevTools extension itself. (We do this to help improve performance, since we send a lot of communication traffic this way– and it's expensive.)
Realistically it's probably unlikely to change for a while– until I finish the rewrite of DevTools that I'm working on because changing this part of the current DevTools has proven to be too tricky. (Things break or performance worsens considerably.)
@RIP21 If you are using componentWillReceiveProps(nextProps) try replacing it with componentDidUpdate(prevProps, prevState) . And you can continue accessing the component's props inside using this.props I had the same problem as yours which got rectified on doing the above change.
I am having no problems with viewing component props but I am experiencing this issue on expanding an object (modalProps in red) on a <Context.Provider>. Value object modalState in blue flashes every second due to unrelated component WaitTime in green. WaitTime is a timer display updating state every second for the display. However using the React Profiler I confirmed only WaitTime is rerendering as is should. Everything else including <Context.Provider> shows a single render. So this appears to be the result of React commits not the render itself?
Interestingly I can spread the parent object and modalProps can be expanded without collapsing. The Empty object text inside however flashes every second so I imaging any object in there would have the same issue.
Interestingly I can spread the parent object and modalProps can be expanded without collapsing.
DevTools currently only serializes a couple of levels deep. Sounds like your object is right on the threshold.
This behavior will not change in the current DevTools. The new DevTools should improve it significantly though.
The new DevTools should improve it significantly though.
Related PR: bvaughn/react-devtools-experimental#325
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