React hooks stuck at "Loading..."

[timuric]

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

[bvaughn]

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!

[bvaughn]

This bug should be fixed with the recent 16.8.4 release

[RubenVerborgh]

@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...".

[timuric]

@RubenVerborgh as a workaround you can write useContext last in the sequence of hooks calls. It worked for me.

[RubenVerborgh]

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;
}

[bvaughn]

@RubenVerborgh I'm happy to take a look, but I'll need a complete repro.

[RubenVerborgh]

@bvaughn Confirmed to work when both react and react-dom are at 16.8.4 (had missed that). Thanks.

[bvaughn]

👍 Thanks for the follow up.