Hook values don't show in react-devtools

[Venryx]

The values for the useState hooks don't show in react-devtools (unlike standard hooks).

Possible explanations

1. React-devtools may explicitly check if a component is class-based, and if so, runs no hook-checking code.
2. The hook mechanism used by react-universal-hooks differs from the official hooks, so react-devtools can't recognize them.

Potential solutions

1. If cause is no. 1: Somehow trick react-devtools into thinking class-based components are functional ones, so it runs the hook-checking code.
2. If cause is no. 2: Modify the hook mechanism in this library to match that of the official hooks.

Workaround

In the meantime, I've come up with a workaround for accessing the hook data, by wrapping the hooks and having them store their data (using object-mutation to prevent re-renders) on something like component.state.hookValues.

The component is accessible from the hooks because I have a currentCompBeingRendered = this line run at the start of each render function. (I already auto-wrap the render function of components, so I was able to just add to that)

Here are the areas of code accomplishing my workaround: (in this case, the type of hook exposed is a variant of useSelector from react-redux, but you could use the same approach for any hook type)

• Wrap render funcs, to track the currently-rendering comp
• Expose the hook-data onto comp.state.@debug (comp.Debug(...) just adds to comp.state.@debug)

[salvoravida]

@Venryx
Hi, currently ruh does not support devTools due to internal class hooks implementation.
thank you for your ideas, it's something that is on roadmap.

Meanwhile can you test new version 0.4.0 as you have many real app use case?

thank you!

[salvoravida]

hum seems that react dev tools does not inject hookLog if componet is a Class one.

i see only 2 possible solutions

1. add this.state.useState0 useState1 etc... only in Dev mode (maybe with a flag to activate it?)
2. create e modded react-dev-tools for including Class components.

maybe the best solutionsi 1? without modding react dev tools?

what do you think about?

[Venryx]

I think the first approach is probably better, since it doesn't require your having to maintain a fork of react-dev-tools, and it works without the developer having to install a new browser extension.

I think it'll work. It's a bit less "elegant", but practically speaking the end result should work as well as the regular hook inspection UI.

The only difficulty points:

1. Finding out the currently-rendering component, from within react-universal-hooks. The way I'm currently doing it is by wrapping the render functions of my components, from within the constructor function of a "base component class" that all my component are derived from, but it would be ideal if there were a way to retrieve that data without needing the developer to change the base class for their components. (another option is a class decorator, but that has a similar annoyance) EDIT: Nevermind, you probably already know how to do this, from your building react-universal-hooks in the first place.
2. Storing the hook data on component.state, without causing the component to re-render (since it's only for debug purposes, it shouldn't change the component's render count). One way to do this is to have a static this.state.@hookData object, that you just mutate with the new data instead of calling this.setState({["@hookData"]: newHookData}). Imo, this workaround is fine, since it's only for development/debugging anyway.

[salvoravida]

yes i will put a @hookData into this.state the only problem is if someone use a key like "@hookData" 🎉 but reactDevTools does not support keySymbol so there is no other way!

to be clear that "@hookData" is a reseved key on this.state, i think to export a function to activate debugMode

on indexApp.js

import { supportReactDevTools } from 'react-universal-hooks';

supportReactDevTools ({ active: process.env!=="production", stateKey:'@whatYouWant' });
//default active:false, stateKey:'@hookData'

[salvoravida]

@Venryx
v. 0.5.0
useContext - add observedBits
add useDebugValue !
support React Dev Tools!
removed babel object spread!

import { supportReactDevTools } from 'react-universal-hooks';

supportReactDevTools ({ active: process.env!=="production" });

[Venryx]

Nice!

Now react-universal-hooks has feature parity with the official hooks. (at least as far as I have used them)