facebook/react-devtools

Persist previous state upon page refresh

Closed this issue · 7 comments

rayshan commented

Hello, it would be nice if react-devtools can remember user's search term / selection / tree expansion state / etc. upon refreshing the page in browser.

kassens commented

This would be a nice addition and doesn't seem super complicated. Contributions welcome :)

jaredly commented

Here's how I would do it:

  • store that state in the chrome extension's "background page", keyed by the tabid
  • on refresh, try to expand, and if it doesn't work (e.g. nodes not rendered yet) try again in a second or so...
  • you'd probably also want to make sure to clean up the stored data when the tab closes
khanghoang commented

I'd like to give it a try

  • 👍1
khanghoang commented

I'm facing the problem that I don't know what to store because the id of the node changes when we refresh the page. My first thought was we shall store the path of the current expanded nodes but it seems doesn't work properly in some cases, for example, the list of children.

cc @gaearon @jaredly

gaearon commented

I would probably store displayName and key path. This is as accurate as it gets IMO. I wouldn't rely on any IDs.

bvaughn commented

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

gaearon commented

FWIW the rewrite has this feature. :-)