`useState` has something wrong in devtools if used with `useContext` and `useEffect`.

[zhengxiaoyao0716]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
The useState got an unexpected state like {tag: 192, create: ƒ, destroy: undefined, deps: Array(0), next: {…}} when we open the Chrome devtools and select the mounted node.

Here the test code:

import React, { createContext, useContext, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const TestContext = createContext();

const useTest = () => {
    const context = useContext(TestContext) || {};
    useEffect(() => { console.log(context); }, []);

    const [state, _setState] = useState(null);
    console.log(state);
};

const Test = () => {
    useTest();
    return <div></div>;
};

ReactDOM.render(<Test/>, document.getElementById('root'));

Then if we open the Chrome devtools and click the Test node, we can see the useState returns an unexpected state:

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
OS:

Microsoft Windows [版本 10.0.15063]

React:

    "react": "^16.8.3",
    "react-dom": "^16.8.3",

Chrome:

版本 72.0.3626.109（正式版本） （64 位）

[zhengxiaoyao0716]

It seems that this usage would insert an unexpected hook when open the devtools:

[bvaughn]

Hey thanks for the bug report. Looks like it's the one that we fixed in 16.8.4:
https://github.com/facebook/react/blob/master/CHANGELOG.md#react-dom-and-other-renderers

If you test with Code Sandbox, please keep in mind that it uses React 16.8.3 still by default. (Not sure why, cc @CompuIves.)

Here is a Code Sandbox that shows this working as expected:
https://codesandbox.io/s/jlwk686rmy

[zhengxiaoyao0716]

You are right, it is already fiexed, thanks.

[bvaughn]

Glad to hear