Potential issue when using typescript.

[vnvizitiu]

Hello,

I noticed that when I use typescript in my projects via the webpack ts-loader, all of the fields of the state of a component become read-only (the field name if there is one becomes gray instead of orange and the value cannot be selected or edited), even if that state is just a simple boolean flag hook.

The following image shows the usage of an object since it's the basis of the global state of the component.

I did some testing and found out the following:

• this behavior is also happening if the file is just a JSX file instead of a TSX file. (using the webpack babel-loader)
• the released react dev tools show the same behavior towards editing.

I also noticed that there is a "workaround" for this by passing that state through props, sadly this would only affect those propers and anything tied to it so it won't update the source of the state.

Here's an example of passing that state via props to a componens (instead of defining state locally or by using contexts):

I don't know if this is a bug, or it is just as it should be, thought i'd mention it in case there might be a "fix" for it since I cannot edit state for debugging purposes

Thanks,
Vlad V.

[vnvizitiu]

Update, another workaround is to dump the component to the console, manually update the value, and then cause a refresh of the component by editing a non-related prop (so that the value I edited doesn't get overwritten)

[bvaughn]

Looks like your "state" is stored in hooks, which aren't editable unless (1) you're running React v16.9 (latest release) and (2) it's in DEV mode.

Props (and class component state) are editable in dev and production builds because "editing" them just requires mutating values on an Object. Editing hooks is more complicated for DevTools to support. It requires an injected edit function which React does not provide in production mode.

Hope this clears things up! :)

[vnvizitiu]

Thank you for that, I didn't even know 16.9 was out (saw now thanks to your feedback that it was released 2 days ago).

Also, it seems I might have been confusing it with an older version of the component which made extensive use of class components and state instead of hooks, and was compiled with gulp and babelify, and I got those mixed up because we're transitioning to hooks and webpack with typescript.

I'll try it out for 16.9 cause we were running it in dev mode.