React-devtools: Hook "state" being destroyed when a component inspected

[ctrlplusb]

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]

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 https://github.com/facebook/react/pull/14940.

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

[bvaughn]

This bug should be fixed with the recent 16.8.4 release