React-devtools: Hooks: non-primitive state pieces are not inspectable

[mgol]

Currently, if you put a non-primitive value in a state using hooks, like:

const [position, setPosition] = useState({x: 42, y: 13});
const [fruits, setFruits] = useState(['apple', 'banana', 'orange']);

all the DevTools (3.6.0) shows is the following:

  State: {…}
  State: Array[3]

with no way to inspect what's inside the object or an array. This makes it significantly less useful.

See it live at https://react-l4hrmm.stackblitz.io/ (look at the Hello component in DevTools). Code at https://stackblitz.com/edit/react-l4hrmm.

Related: #1215

[splnlss]

We are having this exact same problem! Please fix, this is making it unusable.

[Jessidhia]

Another feature that is missing relative to props and class component state is the "Store as global variable" option. For custom hooks, it would necessarily need to use the last value passed to useDebugValue.

[AustinHunt]

This feature is essential for continued use of this tool. Hooks will probably overtake the current paradigm. It would be nice to see more tools built around them.

[apenab]

1301 I Have the same problem, please fix...🙏

[apenab]

@mgol => https://twitter.com/apenab1995/status/1095706107425763333?s=19

[apenab]

I think this was the answer we where waiting for

[bvaughn]

FYI commit https://github.com/bvaughn/react-devtools-experimental/commit/0008bb00 added this ability in the DevTools rewrite

[godmar]

Will this be backported to the current DevTools? It's April now and hooks have been released several months ago.

[bvaughn]

No. Backporting would be pretty complex because of how the bridge is architected. I have limited time to work on DevTools, and I think it's a better use of that time to invest in the newer version so we can release it sooner.

You can use the beta release if you'd like: https://react-devtools-experimental.now.sh

[TroyAlford]

@bvaughn - the zip file for the Chrome plugin at the above link appears to be corrupted. WinZip won't extract it. :(

[apenab]

@TroyAlford I just did all the procedure described here =>https://react-devtools-experimental-chrome.now.sh. Everything went well

[bvaughn]

The build script uses adm-zip to create the bundle. I see a few mentions on that module's GitHub about Windows problems. On person there suggested using node-archiver instead, but that library looks like it has a _much smaller usage_ based on NPM stats, so it might have problems too that just haven't been uncovered.

I dunno. Both this project and the main DevTools project use adm-zip and have for a long time (at least the main project) so I'm not sure what the problem would be 😦 Unfortunately I don't have a Windows machine to test and troubleshoot this one.

[apenab]

@TroyAlford .I utilize WinRar and Windows File Expoler and all good

[TroyAlford]

Awesome - thanks, guys. I'll try that.

On Fri, Apr 12, 2019 at 10:09 AM apenab [e-mail] wrote:

I utilize WinRar and Windows File Expoler and all good

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-devtools/issues/1282#issuecomment-482651271,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALsdfFLl_-3mB3LrefssJqRTzNM0BnObks5vgL3WgaJpZM4aJ5ew
.

--
Troy Alford | [email protected] | 818-921-6288

[danhnn]

Hi @bvaughn , how can I use DevTool rewrite with react-native ? Currently I see It works in web only.

[corysimmons]

DevTools 4 looks so good 🤤 Is there a checklist for its release?

[brannonglover]

@TroyAlford I just did all the procedure described here =>https://react-devtools-experimental-chrome.now.sh. Everything went well

At first I was confused on why I wasn't seeing this work, but I realized I needed to completely close out of Chrome in order to gain the new features. All good now.

[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