Hook "state" being destroyed when a component inspected
Closed this issue · 2 comments
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
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!
This bug should be fixed with the recent 16.8.4 release