Combining Zustand + useContext

[SimeonGriggs]

I couldn't find a code example of combining Zustand with useContext to manage global state. So I quickly put something together. It's a super simple App to show different components that each call and update the same store.

But I'm not entirely sure if the approach I've taken – while it works – is most efficient.

https://github.com/SimeonGriggs/zustand-useContext

Specifically, I'm using different methods in each component. Two components pull the store from Context, another uses a custom hook to pull the store from Context.

The aim here was to retrieve items from store with the least amount of code. The custom hook is less code, but requires double-handling everything from the store.

I'm curious to get feedback on the approach being demonstrated here if anyone has the time to take a look.

[dai-shi]

I think this use case is valid with caveats.
In general, passing the hook via props or contexts should be done carefully.
If you pass another hook with different signature (the order of primitive hooks),
it will violate the rules of hooks and React will complain.

This is why we don't document this use case, and recommend creating hooks at module level and import them.

const useStore = create(...);

export const useGlobalStore = () => {
  return {
    quantity: useStore(state => state.quantity),
    increaseQuantity: useStore(state => state.increaseQuantity),
    decreaseQuantity: useStore(state => state.decreaseQuantity),
    resetQuantity: useStore(state => state.resetQuantity),
  };
};

[ivanjeremic]

I don't get why we would share it via context?

Fox example, some developers may prefer it as dependency injection.

Again, here's the summary:

• In the first place, zustand is a non-context solution (module state).
• It's unopinionated, and technically you can pass a store via props or context.
• However, there's a pitfall about passing a hook via props or context in general, so it'd be only for power users.

can I create a folder where all my stores will live and then import them in my react components, is this the correct way?

Yes, totally.

And what about the functions I get from my store to manipulate state, can I use then in useEffect?

Yes. Use the functions either in useEffect or in callback, never in render.

I like the context way where we can use the functions directly in render, any workaround or best practice to have e the same in zustand?

[dai-shi]

You can't use functions in render even if it's context based. It's not the limitation with zustand. Or, I may misunderstand what you mean by using functions directly.

[ivanjeremic]

You can't use functions in render even if it's context based. It's not the limitation with zustand. Or, I may misunderstand what you mean by using functions directly.

What I mean by that is the official example https://codesandbox.io/s/dazzling-moon-itop4?file=/src/App.js Here is the inc function directly used in jsx this is what I understand as the render part.

[dai-shi]

OK, I see what you mean. That's fine because it's just passing a function as a callback. It's confusing but what we need to avoid is invoking a function in render.

So, this is totally fine:

const Component = () => {
  const { count, inc } = useStore()
  return (
    <div>{count} <button onClick={inc}>+1</button></div>
  )
}

We need to avoid the following:

const Component = () => {
  const { count, inc } = useStore()
  inc()
  return ...

useEffect instead:

const Component = () => {
  const { count, inc } = useStore()
  useEffect(() => {
    inc()
  }, [inc])
  return ...

[ivanjeremic]

Ok that makes sense thanks!