React Devtools are crashing when selecting a Component using a redux-react hook.

[bdbch]

I experienced crashes with my application when using the provided hooks.

When I try to inspect a component using the useMappedState hook, the application will crash with the following error:

My code implementation for the name component:

import React, { useCallback } from 'react'
import { useMappedState } from 'redux-react-hook'

const NamePreview = () => {
    const mapState = useCallback(state => ({
        name: state.name
    }), [])
    const { name } = useMappedState(mapState)

    return (
        <div>{ name }</div>
    )
}

export default NamePreview

looks like the devtools don't know how to interpret the value of the mapped state. Anyone else experienced issues like this?

[ianobermiller]

@bvaughn are we doing something bad with this custom hook, or is there a bug in the devtools?

[3dx-tech]

I have been similar situation with this custom hook. I believe is bug into devtools. I tried use this case with other similar hooks and they same influence to devtools.

[bvaughn]

Where's a repro that I can run?

If there's a bug triggered by DevTools, it's likely caused by the react-debug-tools package.

I would initially be suspicious of this async useCallback function:

But it looks like there is no async code in the second error stack.

Anyway. Repro please.

[bdbch]

Yeah it only happens when I use the useCallback function. I thought it's in combination with the redux hooks.

[bvaughn]

I'll take a look, but only if you point me at a Code Sandbox where I can reproduce the problem. (I get pinged on a lot of issues. I don't generally have the time to figure out how to repro them.)

[bdbch]

Here is a sandbox:
https://codesandbox.io/s/z2qok540m

Note:
The app is not crashing itself in code sandbox because the error handler is not working as on a cra application. Check the console after inspecting an element. You'll see that you can't get the <Dog />'s hook data and the console will throw an error related to the useCallback.

Maybe it's something with React itself.

[bvaughn]

Thanks for sharing the repro!

This is interesting. Initially, I suspected the react-debug-tools package because it's doing some clever things to inspect hook values. Setting breakpoints and stepping through the code now– it looks like when react-debug-tools is running things, the useMappedState hook is returning null for derivedState because of this bit of code:

function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  let hook = nextHook();
  let state: S =
    hook !== null          // 👈 this isn't null
      ? hook.memoizedState // 👈 but this is
      : typeof initialState === 'function'
        ? initialState()
        : initialState;
  hookLog.push({primitive: 'State', stackError: new Error(), value: state});
  return [state, (action: BasicStateAction<S>) => {}];
}

I think that's because it's the wrong type of hook. Looks like this call to nextHook() is returning a hook of _debugType: "useContext". 🤔This isn't right. Our expected state hook is actually the next hook in the list...

The Fiber's expected sequence of hooks is: callback, context, state, ref (x3), effect

Bah! Looks like it's because useContext doesn't call nextHook() to advance the list.

Edit I need to dig a bit more. I can't reproduce this behavior when run as a local test. Will look into it more (perhaps not until Monday though) and report back!

[bdbch]

Good that my code could help you figuring out the issue!

[bvaughn]

This turned out to be a bit more complex than it seemed at first glance. (See facebook/react#14940 (comment)).) We have a couple of possible fixes. Waiting on some others to weigh in before proceeding.

[bdbch]

Thanks for keeping us updated. I'll look into the PR to see more informations!

[bvaughn]

FYI the fix facebook/react/pull/14940 has landed, but won't be useful until the next React release.

[bdbch]

Thank you alot @bvaughn!

[bvaughn]

The fix for this issue was released with v16.8.4