nextjs with zustand-v4 (zustand/context migration guide)

[benx-wang]

I am trying zustand with next.js based on with-zustand-example that depends on creatContext function.

As creatContext will likely be deprecated in v4 and removed in v5 ,
So what is the right pattern to update the example ?

[dai-shi]

Good point.
We have an example in https://github.com/pmndrs/zustand/releases/tag/v4.0.0, but not migration guide.

zustand/context migration guide

Previously, we did something like this:

import create from 'zustand'
import createContext from 'zustand/context'

const MyContext = createContext()

const createMyStore = () => create(...)

const App = () => (
  <MyContext.Provider createStore={createMyStore}>
    ...
  </MyContext.Provider>
)

const Component = () => {
  const slice = MyContext.useStore(selector)
  ...
}

With v4, it can be the following:

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

const MyContext = createContext()

const createMyStore = () => createStore(...)

const App = () => {
  const store = useRef(createMyStore()).current // or any better solution
  return (
    <MyContext.Provider value={store}>
      ...
    </MyContext.Provider>
  )
}

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

[cuppachino]

Yes @razgraf https://github.com/pmndrs/zustand/blob/main/docs/guides/initialize-state-with-props.md

[maxgurewitz]

Hi all. Are there any plans to update the next.js example to use the new api? @Munawwar .

Thank you.

[prabak]

Hi,

I am trying to use nextjs with the latest version of zustand. Do we need to use special handling for server side vs client side on nextjs if the store is bound to a page. That is, there is no global store but store created for specific pages via:

function BearProvider({ children, ...props }: BearProviderProps) {
  const storeRef = useRef<BearStore>()
  if (!storeRef.current) {
    storeRef.current = useCreateBearStore(props);
  }
  return (
    <BearContext.Provider value={storeRef.current}>
      {children}
    </BearContext.Provider>
  )
}

thank you.

[dai-shi]

That looks fine. We just recommend createStore and useStore over create in the context usage.

[Munawwar]

Hi all. Are there any plans to update the next.js example to use the new api? @Munawwar .

Thank you.

I haven't used next in a while now (and haven't upgraded zustand too in a while). I guess its up to you all to keep the community moving.
("The power is yours!" says captain planet and exits)

[karltaylor]

How would this work when copying the ssr example? https://github.com/vercel/next.js/blob/canary/examples/with-zustand/lib/store.js

[arvinxx]

you can still use createContext method with zustand-utils

[prabak]

Someone created a PR: vercel/next.js#46911

[mhfaust]

Has anyone done this with TS? The most basic example following the docs doesn't compile.
Problems:

• createContext requires an initial value (not provided in sample code, but that one's easy enough to fix)
• The context returned from createContext isn't accepted by useContext -- "Argument of type 'TestShape' is not assignable to parameter of type WithReact<StoreApi<unknown>>"

import { createContext, useContext, ReactNode, useRef } from "react";
import { createStore, useStore } from "zustand";

type TestShape = {
  key: string;
}

const createTestStore = () => createStore<TestShape>((set) => {
  return {
    key: '',
    setKey: (key: string) => set({ key })
  }
});

const TestContext = createContext<TestShape>({
  key: ''
};

export const Provider = ({ children }: { children: ReactNode}) => {
  const gameStore = useRef(createTestStore()).current;
  return (
    <TestContext.Provider value={gameStore.getState()}>
      {children}
    </TestContext.Provider>
    
  );
};

const useTestStore = (selector: any) => useStore(useContext(TestContext), selector);

[cuppachino]

you need to curry createStore<TestShape>()((set) => ....

EDIT Here's a full example

import { createContext, useContext, ReactNode, useRef } from "react";
import { createStore, useStore } from "zustand";

type TestShape = {
  key: string;
}
type TestShapeActions = {
  setKey: (key: string) => void;
}

const createTestStore = () => createStore<TestShape & TestShapeActions>()((set) => {
  return {
    key: '',
    setKey: (key: string) => set((state) => ({ ...state, key }))
  }
});

type TestStore = ReturnType<typeof createTestStore>;

const TestContext = createContext<TestStore | null>(null);

export const Provider = ({ children }: { children: ReactNode }) => {
  const gameStoreRef = useRef<TestStore>();
  if (!gameStoreRef.current) {
    gameStoreRef.current = createTestStore();
  }
  return (
    <TestContext.Provider value={gameStoreRef.current}>
      {children}
    </TestContext.Provider>

  );
};

export const Consumer = () => {
  const storeApi = useContext(TestContext);
  if (!storeApi) throw new Error("Missing TestContext.Provider in the tree")
  const setKey = useStore(storeApi, (state) => state.setKey);
  const key = useStore(storeApi, (state) => state.key);
  return (
    <div>
      <button type="button" onClick={() => setKey("myKey")}>Set Key</button>
      <div>Key: {key}</div>
    </div>)
}

function App() {
  return (
    <div className="App">
      <Provider>
        <Consumer />
      </Provider>
    </div>
  )
}

export default App

Is anything from the guide broken?

[riccardolardi]

The example https://github.com/vercel/next.js/tree/canary/examples/with-zustand seems to work fine for me, thanks a lot for making this. One question though: if I wanted to re-initialize / update the store on route change (after hydration) based on new data from getStaticProps, how would I do that?

In myPage.tsx

export const getStaticProps: GetStaticProps = async (context) => {
  const { mainMenuData } = myFetchRequest()...
  const store = initializeStore({ mainMenuData })

  return {
    props: {
      initialStoreState: JSON.parse(JSON.stringify(store.getState())),
    },
  }
}

This will work fine for first request but will not update mainMenuData after route change since:

In store-provider.tsx

const StoreProvider = ({ children, ...props }: PropsWithChildren) => {
  const storeRef = useRef<StoreType>()

  if (!storeRef.current) { // this will block updating the values
    storeRef.current = initializeStore(props)
  }

  return <Provider value={storeRef.current}>{children}</Provider>
}

Can I just remove that check if (!storeRef.current) and set initializeStore(props) every time the props change?

[Igorlialko]

I created npm package for Provider zustand
https://www.npmjs.com/package/next-zustand
Happy coding bro !)