React hooks stuck at "Loading..."
Closed this issue · 8 comments
Having both useRef
and useContext
causes hooks inspection get stuck on "Loading.."
https://codesandbox.io/s/xljlvjl8xz?fontsize=14
React: 16.8.3
Devtools: 3.6.0
Chrome: 72.0
OSX: 10.14.3
I don't think the sandbox you shared is really showing anything meaningful? But I think you're probably referring to the fact that once you select a function using the useContext
hook, it can cause an error:
Uncaught TypeError: Cannot read property 'current' of null
The underlying cause of this issue is a React bug that has been 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
@bvaughn I had a similar problem, and upgrading to 16.8.4 does not fix the issue.
Preceding a call to useState
with useContext
, cause useState
to return null
when inspecting the component in the React Developer Tools 3.6.0, which subsequently gets stuck on "Loading...".
@RubenVerborgh as a workaround you can write useContext last in the sequence of hooks calls. It worked for me.
I have tried to make simple case to reproduce the problem, but the simple case works fine. The more complex case fails (because of useState
returning null
). I don't have the bandwidth simplify it, but can share the complex one if needed.
In the complex case, the following happens conceptually (but apparently slightly different, because the below case works):
import React, { createContext, useContext, useState, useDebugValue } from 'react';
const MyContext = createContext({});
function useMyState() {
const state = useState('one');
useDebugValue(state);
return state;
}
function useMyContext() {
const context = useContext(MyContext);
useDebugValue(context);
return context;
}
export default function App() {
return <MyContext.Provider value="test"><Children /></MyContext.Provider>
}
function Children() {
return <GrandChildren/>;
}
function GrandChildren() {
const [foo] = useMyState();
const context = useMyContext();
const [bar] = useState('two');
useDebugValue(foo);
return bar;
}
@RubenVerborgh I'm happy to take a look, but I'll need a complete repro.
@bvaughn Confirmed to work when both react
and react-dom
are at 16.8.4 (had missed that). Thanks.
👍 Thanks for the follow up.