What is the use case / benefit for calling useStore twice?

[httpete-broadcom]

In this doc:

https://zustand.docs.pmnd.rs/hooks/use-store

You have two invocations of the useStore hook. Since they can always be combined to use one - what is the advantage of doing multiple picks?

[httpete-broadcom]

The AI says:

[dai-shi]

If you have one combined useStore like this

useFooStore(state => [state.bar, state.baz])

it will cause an infinite loop, unless you use useShallow or custom equalityFn.
Using useShallow is optional, and we want to show two hook usage as a base usage.

[httpete-broadcom]

Thank you @dai-shi I meant like this in the example:

  const position = useStore(positionStore, (state) => state.position)
  const setPosition = useStore(positionStore, (state) => state.setPosition)
  

Why do two?

[dai-shi]

What would you like to do instead of that?

[httpete-broadcom]

const  {position, setPosition} = useStore(positionStore, (state) => ({ position: state.position, setPosition: state.setPosition});

[dai-shi]

That will cause an infinite loop because the selector function creates a new object every time.

[httpete-broadcom]

Oh I see one distinction that might matter - we create the store in a Context provider which stores the store in a ref. Is that a reason why I can use it in one?

export const { ZustandProvider, useStore } =
  createContext<StoreApi<DialogState>>();

[dai-shi]

If you are not using Zustand v5, can you try with the latest version?

[httpete-broadcom]

We are using the latest Zustand 5. Is there any reason to break up and have two useStore calls given that it is in a Ref?

[dai-shi]

const  {position, setPosition} = useStore(positionStore, (state) => ({ position: state.position, setPosition: state.setPosition});

That should cause infinite loops with Zustand v5. I'm not sure if it doesn't.