Zustand Context in React 19

[mamlzy]

I'm following this article https://tkdodo.eu/blog/zustand-and-react-context.
i'm trying to do the same thing in react 19, but got this errors:

here is the code:

'use client';

import { createContext, use, useState } from 'react';
import { SessionValidationResult } from '@repo/auth';
import { createStore, StoreApi, useStore } from 'zustand';

type AuthAction = SessionValidationResult;

const AuthContext = createContext<StoreApi<AuthAction> | null>(null);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [store] = useState(() =>
    createStore<AuthAction>((set) => ({
      session: null,
      user: null,
      // actions: {
      //   increasePopulation: (by) =>
      //     set((state) => ({ bears: state.bears + by })),
      //   removeAllBears: () => set({ bears: 0 }),
      // },
    }))
  );

  return <AuthContext value={store}>{children}</AuthContext>
};

const useAuthStore = <T,>(selector: (state: AuthAction) => T) => {
  const store = use(AuthContext);
  if (!store) {
    throw new Error('Missing AuthProvider');
  }
  return useStore(store, selector);
};

export const useSession = () =>
  useAuthStore((state) => ({ session: state.session, user: state.user }));

[dai-shi]

Looks like you use .ts extension. Try changing it to .tsx.

[mamlzy]

Thanks @dai-shi, I didn't realize that🫣

[mamlzy]

Now i got this errors:

here is my full code:

auth-context.tsx

'use client';

import { createContext, use, useState } from 'react';
import { SessionValidationResult } from '@repo/auth';
import { createStore, StoreApi, useStore } from 'zustand';

type AuthAction = SessionValidationResult;

const AuthContext = createContext<StoreApi<AuthAction> | null>(null);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [store] = useState(() =>
    createStore<AuthAction>(() => ({
      session: null,
      user: null,
    }))
  );

  return <AuthContext value={store}>{children}</AuthContext>;
};

const useAuthStore = <T,>(selector: (state: AuthAction) => T) => {
  const store = use(AuthContext);
  if (!store) {
    throw new Error('Missing AuthProvider');
  }
  return useStore(store, selector);
};

export const useSession = () =>
  useAuthStore((state) => ({ session: state.session, user: state.user }));

layout.tsx

import { AuthProvider } from '@/components/contexts/auth-context';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <AuthProvider>{children}</AuthProvider>;
}

page.tsx

import { useSession } from '@/components/contexts/auth-context';

export default function Page() {
  const { session, user } = useSession();

  console.log({ session, user });

  return <div>Page</div>;
}

[dai-shi]

Your selector doesn't return a stable result, probably.

[mamlzy]

i think this is related #1936

[mamlzy]

This issue is fixed if i did this:

// error
export const useSession = () => useAuthStore((state) => ({ session: state.session, user: state.user }));

// works
export const useSession = () => useAuthStore((state) => state);

is the second one is bad practice in zustand?

[mamlzy]

btw, feels weird return session and user on a custom hook called useSession I'd split them into their own custom hook but up to you

i'm following better-auth way for returning both session and user on useSession hook

[dbritto-dev]

@dai-shi what you mean?

[mamlzy]

Thanks for helping me @dai-shi, @dbritto-dev 🙏

[dai-shi]

@dbritto-dev when do we need useAuthStore(useShallow((state) => state.user)) instead of useAuthStore((state) => state.user). If state.user has changed, its identity should be changed too.

[dbritto-dev]

@dai-shi I don't see how useShallow could prevent that, rather now you could use user and session as stable deps but correct me if I'm wrong

[dai-shi]

@dbritto-dev

Sorry for the confusion. It was my bad to bring immutability contract in the first place, which has nothing to do with this case actually.

So, my point is that useShallow isn't necessary. Consider,

const useAuthStore = create((set) => ({
  user: { firstName: 'zustand', lastName: 'react' },
  // ...
}));

In this case,

const useUser = () => useAuthStore((state) => state.user);

is enough. Adding useShallow still works, but it doesn't provide any benefit.