Can't use persist with context implementation mentioned in the docs for Next.js

[1Mouse]

*Edit: I reproduced the error on stackblitz here

my code is the same as docs https://docs.pmnd.rs/zustand/guides/nextjs#app-router
I want to prevent hydration errors when using persist middleware

store file

import { devtools, persist } from "zustand/middleware";
import { createStore } from "zustand/vanilla";

export type MainStoreState = {
  selectedPropertyId: number | undefined;
  selectedBusinessOwnerId: number | undefined;
  selectedBusinessOwnerName: string | undefined;
};

export type MainStoreActions = {
  updateSelectedPropertyId: (id: number) => void;
  updateSelectedBusinessOwner: (id: number, name: string) => void;
};

export type MainStore = MainStoreState & MainStoreActions;

export const initMainStore = (): MainStoreState => {
  return {
    selectedPropertyId: undefined,
    selectedBusinessOwnerId: undefined,
    selectedBusinessOwnerName: undefined,
  };
};

export const defaultInitState: MainStoreState = {
  selectedPropertyId: undefined,
  selectedBusinessOwnerId: undefined,
  selectedBusinessOwnerName: undefined,
};

export const createMainStore = (
  initState: MainStoreState = defaultInitState
) => {
  return createStore<MainStore>()(
    devtools(
      persist(
        set =>
          ({
            ...initState,
            updateSelectedPropertyId: (id: number) => {
              set(state => ({ ...state, selectedPropertyId: id }));
            },
            updateSelectedBusinessOwner: (id: number, name: string) => {
              set(state => ({
                ...state,
                selectedBusinessOwnerId: id,
                selectedBusinessOwnerName: name,
              }));
            },
          }) satisfies MainStore,
        {
          name: "main-store", // name of the item in the storage (must be unique)
          skipHydration: true, // do not rehydrate this store after a full page load, we will rehydrate it manually
        }
      )
    )
  );
};

provider file

"use client";

import { type ReactNode, createContext, useContext, useRef } from "react";

import { type StoreApi, useStore } from "zustand";

import {
  type MainStore,
  createMainStore,
  initMainStore,
} from "@/stores/mainStore";

export const MainStoreContext = createContext<StoreApi<MainStore> | null>(null);

export interface MainStoreProviderProps {
  children: ReactNode;
}

export const MainStoreProvider = ({ children }: MainStoreProviderProps) => {
  const storeRef = useRef<StoreApi<MainStore>>();
  if (!storeRef.current) {
    storeRef.current = createMainStore(initMainStore());
  }

  return (
    <MainStoreContext.Provider value={storeRef.current}>
      {children}
    </MainStoreContext.Provider>
  );
};

export const useMainStore = <T,>(selector: (store: MainStore) => T): T => {
  const mainStoreContext = useContext(MainStoreContext);

  if (!mainStoreContext) {
    throw new Error(`useMainStore must be use within MainStoreProvider`);
  }

  return useStore(mainStoreContext, selector);
};

the docs say that we can use this hook for nextjs

// useStore.ts
import { useState, useEffect } from 'react'

const useStore = <T, F>(
  store: (callback: (state: T) => unknown) => unknown,
  callback: (state: T) => F,
) => {
  const result = store(callback) as F
  const [data, setData] = useState<F>()

  useEffect(() => {
    setData(result)
  }, [result])

  return data
}

export default useStore 

but that hook doesn't work with array destructuring syntax

const [
    selectedPropertyId,
    updateSelectedPropertyId,
    selectedBusinessOwnerId,
    selectedBusinessOwnerName,
    updateSelectedBusinessOwner,
  ] = useMainStore(state => [
    state.selectedPropertyId,
    state.updateSelectedPropertyId,
    state.selectedBusinessOwnerId,
    state.selectedBusinessOwnerName,
    state.updateSelectedBusinessOwner,
  ]);

so I went to try the other solution with skipHydration: true

and manually hydrate at the subscribed component inside useEffect

useEffect(() => {
    useMainStore.persist.rehydrate();
  }, []);

but I get this error Property 'persist' does not exist on type '(selector: (store: MainStore) => T) => T'.ts(2339)

[dbritto-dev]

@1Mouse would you mind sharing us a minimal repro on stackblitz?

[1Mouse]

Sure, I can provide a minimal reproduction on StackBlitz.
brb

[1Mouse]

@dbritto-dev here it is
https://stackblitz.com/edit/stackblitz-starters-g83dwx?file=app%2F_components%2FTestClientComponent.tsx

[dbritto-dev]

@1Mouse here you go -> https://stackblitz.com/edit/stackblitz-starters-7xqpvw?file=app%2Flayout.tsx,stores%2FmainStore%2Fprovider.tsx,app%2F_components%2FTestClientComponent.tsx,node_modules%2Fzustand%2Fesm%2Freact.d.mts

The current issue with createStore is that doesn't have the api attached to the hook like create

[1Mouse]

Brilliantly done, thanks a lot @dbritto-dev
that's actullay a great solution and it doesn't violate what was mentioned by @dai-shi at #1975

[donprasetiyo]

@1Mouse here you go -> https://stackblitz.com/edit/stackblitz-starters-7xqpvw?file=app%2Flayout.tsx,stores%2FmainStore%2Fprovider.tsx,app%2F_components%2FTestClientComponent.tsx,node_modules%2Fzustand%2Fesm%2Freact.d.mts

The current issue with createStore is that doesn't have the api attached to the hook like create

This might be a dumb question but do you/should you ignore the typescript error "React Hook useEffect has a missing dependency: 'mainStore.persist'" or should you include the dependency?

[dbritto-dev]

@donprasetiyo no, you should return both, store state and api like in the example that I shared

[donprasetiyo]

@dbritto-dev I mean, the dependency in useEffect.

useEffect(() => {
mainStore.persist.rehydrate();
}, []);

should I just leave the dependency empty?