Documentation incorrect: Usage with React Contexts

[markomitranic]

Dear all,

After reading a lot of blogposts on this, and the docs, the way I see it, there are two ways of combining Zustand with a react context:

1. Using a normal, global store, and attaching the reference to the context - prevents anyone outside of the context from using the store (by normal means at least)
2. Using a local store, exposed to the children, through a react context - adds the superpower to create a new context on every mount/navigation etc.

There are many blogposts talking about this, and most notable discussion here is #730

There is also a section of the readme that briefly mentiones this, here https://github.com/pmndrs/zustand?tab=readme-ov-file#react-context

Problems I'd like to fix:

1. The readme segment is incorrect code. Needs additional brainpower in order to be understood or used.
2. The segment from the readme is never mentioned in the docs website, at all.

Here is a copypaste of the Readme code, so that we can hopefully discuss it here:

import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'

const store = createStore(...) // vanilla store without hooks

const StoreContext = createContext()

const App = () => (
  <StoreContext.Provider value={store}>
    ...
  </StoreContext.Provider>
)

const Component = () => {
  const store = useContext(StoreContext)
  const slice = useStore(store, selector)
  ...

[markomitranic]

For reference, here is a full working example. The example shows a simple version of using a local Zustand store in a context (2), where if the Zustand element which renders the context is unmounted, a new state will be assigned on the very next mount.

import { createContext, useContext } from "react";
import { createStore, useStore, type StoreApi } from "zustand";

type StoreState = { count: number; inc: () => void; dec: () => void; };

const StoreContext = createContext<StoreApi<StoreState>>(
  undefined as unknown as StoreApi<StoreState>,
);

export function Zustand() {
  const store = createStore<StoreState>((set, get) => ({
    count: 0,
    inc: () => set((state) => ({ count: state.count + 1 })),
    dec: () => set((state) => ({ count: state.count - 1 })),
  }));

  return (
    <div className="flex gap-4">
      <button onClick={() => store.getState().dec()}>-</button>
      <StoreContext.Provider value={store}>
        <Child />
      </StoreContext.Provider>
      <button onClick={() => store.getState().inc()}>+</button>
    </div>
  );
}

function Child() {
  const localStore = useContext(StoreContext);
  const count = useStore(localStore, (state) => state.count);
  return <div>Count: {count}</div>;
}

P.S. One thing I'm unsure about is the difference between zustand and zustand/vanilla. It seems to work the same regardless of where I import from. Haven't had the time to look, but sounds like its just a proxy export. Anyway, the original Readme comment imports zustand but then mentions: createStore(...) // vanilla store without hooks which causes a bit of confusion.

[dbritto-dev]

@markomitranic in a nutshell zustand (react) and zustand/vanilla (pure javascript or vanilla javascript)

[dai-shi]

Hi, thanks for opening a discussion.

The readme segment is incorrect code. Needs additional brainpower in order to be understood or used.

The incomplete code in readme.md is very intentional, but the feedback about needing brainpower is appreciated. The notation ... implies "incomplete". I wonder if it helps or not.

As we have a strong opinion about minimizing lines of readme.md, instead of changing code in readmd.md, we would like to create a separate md file in ./docs and only add a link in readme.md.

I wonder if @dbritto-dev 's rewrite covers it. Otherwise, a new PR is very welcome.

[dbritto-dev]

@dai-shi actually, new section usage and learn docs would cover that

[dbritto-dev]

I want to add some real and complete examples with stackblitz demos

[markomitranic]

Okay awesome! Thanks for the response @dbritto-dev @dai-shi , and understanding the need for slightly more communication about this usage pattern. Marking this as answered now, since a PR won't be needed it seems. The future readers will have this discussion AND the newly rewritten docs to reference 😄

[sunwrobert]

Can we introduce a more "built in" way of using zustand with react context like in this blog post?

https://tkdodo.eu/blog/zustand-and-react-context

useContextSelector has a pretty inconvenient API for slicing (not even sure if it is performant doing that), and would be amazing if this was built in to the library. I thought it used to be in earlier versions but was removed?

@dai-shi @TkDodo

[dai-shi]

useContextSelector has a pretty inconvenient API for slicing

Is it something described in the blog post?

I thought it used to be in earlier versions but was removed?

Here's the earlier version by one of collaborators.
https://github.com/charkour/zustand-di
Is it something you expect?

[markomitranic]

After testing this a bit more, I’ve found that it isn’t possible to get a new zustand state each time the context mounts. (scenario 2)

Yes, we do get a new state each time buuuut - As long as the store is declared inside of the component, it seems completely frozen in time - doesn’t cause rerenders.

If the store is declared outside of the component, like in the guide, then it is global, and won’t reset on unmount.

[dbritto-dev]

@markomitranic do you have any example?

[markomitranic]

@dbritto-dev Sorry for such a long time without response, I was on vacation (still am) and vacations here in Denmark are usually the whole of July. I'll make a reproduction tonight ;)