Zombie child errors when dispatching actions with keyboard shortcuts

[martonlanga]

Codesandbox

I'm trying to architect my App in a way that is performant. I'm only trying to fetch the amount of state that's required in each component to minimize re-renders.

I've had runtime errors (which I thought were zombie child bugs) so I've made a sandbox to reproduce it. But it seems to work just fine here.

Runtime Error (in Cell)

Uncaught TypeError: Cannot read property 'cells' of undefined

The error occurs sometimes when I'm removing tabs. So I'm still figuring out why I'm getting these.

Update: Dispatching actions using the buttons work, but using keyboard shortcuts result in errors (sometimes).

But I still wanted to ask whether this is the right way to use zustand. Is there a better way to render my components and construct my store?

[dai-shi]

Error reproduced.

This is reproducible only when we use keyboards without using mouse for several clicks.
So, what's happening is it tries to render child components before the parent, with rapid dispatch invocation.
To fix this on your end is to wrap the dispatch with batchedUpdates.
Here's the modified one: https://codesandbox.io/s/app-tab-cell-forked-poxow

The reason it doesn't repro with buttons is React does it internally.
I don't know why we can't repro after some clicks.

For reference, React-Redux exposes batch api.

[martonlanga]

Thanks a lot @dai-shi, this worked!

[Tirzono]

Is it a good idea to actually wrap the store's set function in batchedUpdates if you use your store in React? Like this:

import create from 'zustand';

const useStore = create((set) => ({
    counter: 0,
    increase: () => {
        ReactDOM.unstable_batchedUpdates(() => {
            set((state) => ({ counter: state.counter + 1 }));
        });
    });
}))

Or are there any unwanted side-effects with this?

[dai-shi]

Although I'm not familiar the internal of batchedUpdates and not a right person to guide it, if it works it should be ok.

I would avoid it, however, because it's possible to do like:

// outside react
useStore.getState().increase()

which may not work?

(on second thought, it's not an issue. so, seems fine.)

[martonlanga]

I went with wrapping my mousetrap hook:

useEffect(() => {
    mousetrap.bind(
      handlerKey,
      (...args) => {
        ReactDOM.unstable_batchedUpdates(() => {
          callbackRef.current(...args)
        })
      },
      action,
    )
    return () => {
      mousetrap.unbind(handlerKey, action)
    }
  }, [handlerKey, action])

Works fine.