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()
name: 'user-storage', // unique key in localStorage getStorage: () => localStorage, // or sessionStorage zust2help
Problem 1: Component Re-renders Too Often Issue: Using the entire store causes re-renders when any state changes. ( /* state */ )
const useStore = create((set) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), decrement: () => set((state) => ( count: state.count - 1 )), )) Using Redux DevTools Wrap your store with devtools() : ( user: null
interface BearState bears: number addBear: () => void eatFish: () => void
// Option 2: Use useRef with store subscription Solution: Define your store's type.
