Reusable createProvider function for NextJS 15 + Zustand 5

[MaKTaiL]

I thought the docs tutorial was too complex for the average user so I decided to do a reusable createProvider function to make it easier to add new stores as your project grows. I decided to share with you guys and I hope you find it useful ☺️

CreateProvider.tsx

"use client";

import {
  type ReactNode,
  createContext,
  useRef,
  useContext,
  type FC,
} from "react";
import { useStore, type StoreApi } from "zustand";
import { useShallow } from "zustand/react/shallow";

export const createProvider = <T,>(
  createStore: () => StoreApi<T>,
  contextName: string,
) => {
  const StoreContext = createContext<StoreApi<T> | undefined>(undefined);

  const StoreProvider: FC<{ children: ReactNode }> = ({ children }) => {
    const storeRef = useRef<StoreApi<T>>(null);
    if (!storeRef.current) {
      storeRef.current = createStore();
    }

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

  const useStoreSelector = <S,>(selector: (store: T) => S): S => {
    const storeContext = useContext(StoreContext);

    if (!storeContext) {
      throw new Error(`${contextName} must be used within its Provider`);
    }

    return useStore(storeContext, useShallow(selector));
  };

  return { StoreProvider, useStoreSelector };
};

Usage (Providers.tsx):

"use client";

import { createProvider } from "@/lib/stores/CreateProvider";
import {
  createCountStore,
  type CountStore,
} from "@/lib/stores/CountStore";

const {
  StoreProvider: CountStoreProvider,
  useStoreSelector: useCountStore,
} = createProvider<CountStore>(createCountStore, "CountStoreContext");

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CountStoreProvider>
        {children}
    </CountStoreProvider>
  );
}

export { useCountStore };

Usage (page.tsx):

"use client"

import { useCountStore } from "./Providers"

export default function Home() {
  const { count, increaseCount } = useCountStore((state) => state);

  return (
    <div className="flex h-screen flex-col items-center justify-center">
         { count }
         <button onClick={() => increaseCount()}>
              Increase Count
         </button>
    </div>
  );
}