facebook/react-devtools

Hook "state" being destroyed when a component inspected

Closed this issue · 2 comments

ctrlplusb commented

Background

This was raised in ctrlplusb/easy-peasy#105.

It appears that when a component with hooks is inspected via dev tools (physically clicked on within the dev tools tree), the hooks state is blown away, which leads to render errors.

Steps to reproduce

  • Clone, install, start

    git clone https://github.com/ctrlplusb/easy-peasy-typescript
cd easy-peasy-typescript
yarn install
yarn start

  • Click/Inspect the <Todos> component within the devtools

Notes

Within <Todos /> there is a hook definition as such:

  // Pull out state from our store
  const items = useStore(state => state.todos.items);

When inspecting the <Todos /> component items becomes undefined, even though the internals of the useStore hook does have the state available (I used a console log to confirm).

As stated above, all is well until clicking the component instance within dev tools.

System Info

react: 16.8.3
react-devtools: 3.6.0
chrome: 72.0.3626.109
os: osx 10.12.6
bvaughn commented

I believe this issue is caused by a difference in React dev and production builds that causes trouble with the useContext hook. It was fixed in facebook/react#14940.

There's nothing DevTools can do to fix this issue, but it should be resolved by the next React release!

  • ❤️1
bvaughn commented

This bug should be fixed with the recent 16.8.4 release

  • ❤️2