Batch setState

Hello!

I’m reviewing this store library, testing out some quirks and stuff. It seems really great, but I would suggest adding some type of batch update when updating multiple stores, if it doesn’t already exist.

// actions
export const action = () => {
  modalStoreApi.setState({ show: false });
  usersStoreApi.setState({ users: [ ...usersStoreApi.getState().users, 'new user' ] })
}

// component
export const Component = () => {
  const show = useModalStore(store => store.show)
  const users = useUsersStore(store => store.users)

  return show && <span>User 1: {users[0]}</span>
})

So in this case, the component will re-render twice, so what would be cool would be something like this, similar to how redux-thunk does it:

// actions
export const action = () => {
  batch(() => {
    modalStoreApi.setState({ show: false });
    usersStoreApi.setState({ users: [ ...usersStoreApi.getState().users, 'new user' ] })
  })
}

Not the greatest example perhaps, but I know this is needed at times, when you’re separating your stores, and combining them at places using selectors and so on.

What do you think?

Thanks

[rdhox]

or at least the components ran my console.log statement twice

Don’t trust your console.log to check rerender. Your component is a function, and functions are always execute, it do not means that React actually triggered an update for your component.

You can check that a render occur with a Math.random():

return(
  {...some JSX}
  {Math.random()}
);

[drcmda]

I wouldn’t bother, only legacy react doesn’t batch, blocking and concurrent will batch automatically, see: https://reactjs.org/docs/concurrent-mode-adoption.html#feature-comparison

*: Legacy mode has automatic batching in React-managed events but it’s limited to one browser task. Non-React events must opt-in using unstable_batchedUpdates. In Blocking Mode and Concurrent Mode, all setStates are batched by default.

Redux will most likely remove that functionality now that it’s officially in react.

Just do this:

ReactDOM.createBlockingRoot(rootNode).render(<App />)

If you don’t want to leave legacy mode, use a small middleware. The following will enable legacy batched updates for zustand, all sets and actions:

import create from 'zustand'
import { unstable_batchedUpdates } from 'react-dom'

const batched = config => (set, get, api) =>
  config(args => unstable_batchedUpdates(() => set(args)), get, api)

const [useStore] = create(batched(set => ({ ... })))