Can you call useStore outside of a functional component or custom hook? Like in a test or helper function

[coltanium13]

for tests, i have seen that other comments say using this technique in tests to reset state is fine. But it seems that this would violate the rules of hooks. Is that true? But the eslint rule does not throw errors for it. It seems here, this is not the useStore zustand hook, but just the store returned from the 'create' function. Is that returned store still a hook?

const initialStoreState = useStore.getState();
describe('MyComponent', () => {
  beforeEach(() => {
    useStore.setState(initialStoreState, true);
  });
...

@dai-shi Does this violate the rules of hooks? You are using the store created by 'create' function in the test which is outside of a component or another custom hook(also does not show eslint warnings). However, the rule does no seem to throw any other errors. Is using the useStore allowed in tests and other non custom hook helper functions? if you are not allowed, how would you get around the rule, to use the same store created by 'create' in a test, or in a helper function?

Or am i confusing the store returned from the 'create' function versus the 'useStore' zustand function?

Thank you!

[dai-shi]

It might look tricky, but useStore.setState(...) is not using the hook.

[coltanium13]

@dai-shi can you elaborate on that a little bit? is useStore (const returned from create) in that example not a hook, and therefore it is OK to use outside of components and not in custom hooks?

That is what it seems like to me too, but i dont understand how. you say that 'create' returns a hook in the docs Your store is a hook! . and in your docs, most of the time you do

const useStore = create(.....stuff)

so in this example, useStoreis not a hook, and can safely be used in the test and helper functions? Even with us by convention, naming it with 'use'?

[dbritto-dev]

@coltanium13 yes, you can use any hook created by create() function outside of react, you can use getState() and/or setState() but setState() doesn't trigger a new render which is useful for testing but if you want to listen any changes on the store you need to use subscribe()

[coltanium13]

@dbritto-dev ok, thank you for clarifying, that is great to know! thank you!

[coltanium13]

clarified, and closed. thank you!

[kenas4idps]

Hi, I encounter a typescript error when calling useStore.getState() from a createStore(). (I'm following the NextJS for /app directory guide to use the createStore).

This is my store provider implementation:

'use client'

import { type ReactNode, createContext, useRef, useContext } from 'react'
import { useStore } from 'zustand'
import { UserStore, createUserStore } from '~/zustand/userStore'

export type UserStoreApi = ReturnType<typeof createUserStore>

export const UserStoreContext = createContext<UserStoreApi | undefined>(undefined)

export type UserStoreProviderProps = {
  children: ReactNode
}

export const UserStoreProvider = ({ children }: UserStoreProviderProps) => {
  const storeRef = useRef<UserStoreApi>()

  if (!storeRef.current) {
    storeRef.current = createUserStore()
  }

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

export const useUserStore = <T,>(selector: (store: UserStore) => T): T => {
  const userStoreContext = useContext(UserStoreContext)

  if (!userStoreContext) {
    throw new Error(`useUserStore must be used within UserStoreProvider`)
  }

  return useStore(userStoreContext, selector)
}

I simply wants to use this useUserStore outside of react like:

const nonReactFunction = async () => {
  const user = useUserStore.getState().user // there is error on this line under getState()
  console.log(user)
}

And if I don't use getState() the code still works, but I got ESLint error about the rules of hooks.
Is there something wrong in my provider setup? or am I simply going on the wrong direction with this?

[dai-shi]

yeah, you need this:

export const useUserStoreApi = (): UserStoreApi => {
  const userStoreContext = useContext(UserStoreContext)
  if (!userStoreContext) {
    throw new Error(`useUserStore must be used within UserStoreProvider`)
  }
  return userStoreContext
}

usage:

const nonReactFunction = async () => {
  const user = useUserStoreApi().getState().user
  console.log(user)
}

[kenas4idps]

I see, I need to return the context instead of returning the useStore hook. It's clear now, thank you!