import devtools, persist from 'zustand/middleware' const useStore = create( devtools( persist( (set) => ( /* state */ ), name: 'app-storage' ) ) ) const useStore = create((set, get) => ( user: null, loading: false, fetchUser: async (id) => set( loading: true ) const response = await fetch(`/api/user/$id`) const user = await response.json() set( user, loading: false ) , )) 4. Accessing Store Outside React // In a utility function or plain JS module import useStore from './store' // Get current state const currentState = useStore.getState()
Use persist with a skipHydration option or conditionally access storage.
// Option 2: Use useRef with store subscription Solution: Define your store's type. zust2help
const useBearStore = create<BearState>((set) => ( bears: 0, addBear: () => set((state) => ( bears: state.bears + 1 )), eatFish: () => set((state) => ( fishes: state.fishes - 1 )), )) Solution: Use the persist middleware.
Problem 1: Component Re-renders Too Often Issue: Using the entire store causes re-renders when any state changes. // Option 1: getState() const handleClick = ()
name: 'user-storage', // unique key in localStorage getStorage: () => localStorage, // or sessionStorage
) ) Issue: LocalStorage or session is not available on the server. const useBearStore = create<
// Option 1: getState() const handleClick = () => const currentCount = useStore.getState().count console.log(currentCount)