facebook/react-devtools

Hooks incompatible with legacy context

Closed this issue · 4 comments

matt-tingen commented

After updating from react 16.4.1 to 16.8.1, I'm seeing some odd behavior for existing components using legacy context. The observed behavior for functional components is as follows:

Hooks, no context

The devtools work as expected.

Context, no hooks

The devtools do not show the context section.

Context and Hooks

The devtools:

  • Do not show the context section
  • Show the hooks section with just "Loading..."
  • Errors trying to read from context:
Uncaught TypeError: Cannot read property 'counterLabel' of undefined
    at ContextAndHook (ContextAndHook.js:29)
    at backend.js:formatted:9096
    at S (backend.js:formatted:9103)
    at i (backend.js:formatted:9127)
    at e.<anonymous> (backend.js:formatted:9137)
    at e.r.emit (backend.js:formatted:4741)
    at backend.js:formatted:4364
    at backend.js:formatted:5581
    at Array.forEach (<anonymous>)
    at backend.js:formatted:5580
    at Array.forEach (<anonymous>)
    at t.value (backend.js:formatted:5577)
    at e (backend.js:formatted:4192)

Minimal Repro

Source
Preview

Inspect the three buttons in order in react devtools and observe the behavior described above.

Similar issues

This all seems similar to #1174, but I'm using v3.6.0 and that issue relates to the newer Context API.

Also, possibly related to #1295.

bvaughn commented

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! 😄

  • ❤️1
bvaughn commented

This bug should be fixed with the recent 16.8.4 release

matt-tingen commented

@bvaughn Unfortunately, I'm still seeing the same symptoms with 16.8.4.

I moved the repro to codesandbox so it's a bit easier:
Source
Preview

bvaughn commented

Whoops I meant to comment rather than re-open.

This looks like a different bug/incompatibility than I assumed initially. The react-debug-tools utility does not support legacy context. The proper place to file this bug would be in the React repo. I'll open an issue there.

  • 👍1