Hooks incompatible with legacy context
Closed this issue · 4 comments
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
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.
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
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.