Zust2help

Problem 1: Component Re-renders Too Often Issue: Using the entire store causes re-renders when any state changes.

// store/userStore.js export const useUserStore = create((set) => ( user: null, setUser: ... )) // store/cartStore.js export const useCartStore = create((set) => ( items: [], addItem: ... )) Zustand supports Redux DevTools, persistence, and custom middleware. zust2help

// Bad — re-renders on any state change const count, increment, user = useStore() // Good — re-renders only when count changes const count = useStore((state) => state.count) const increment = useStore((state) => state.increment) Issue: Event handlers or useEffect closures capture old state. Problem 1: Component Re-renders Too Often Issue: Using

// Subscribe to changes const unsubscribe = useStore.subscribe((state) => console.log('State changed:', state) ) | Redux Concept | Zustand Equivalent | |---------------|--------------------| | Store | create() | | Reducer | set((state) => (...)) | | Action | Regular function | | Dispatch | Direct function call | | useSelector | useStore((state) => state.value) | | Middleware | middleware wrapper | Redux to Zustand Example Redux: )) Zustand supports Redux DevTools, persistence, and custom

// reducer, actions, constants, etc. const mapState = (state) => ( count: state.counter.count ) const mapDispatch = increment, decrement

import create from 'zustand' import persist from 'zustand/middleware' const useStore = create( persist( (set) => ( user: null, token: '', setUser: (user) => set( user ), ),