Back to articles
Zustand Has a Free State Management Library — Here's How to Use It

Zustand Has a Free State Management Library — Here's How to Use It

via Dev.to ReactAlex Spinov

Redux needs 4 files to add one piece of state. Context API re-renders everything. Zustand gives you global state in 3 lines — no providers, no boilerplate, no re-render problems. What Is Zustand? Zustand is a small, fast state management library for React. It's 1KB, requires no providers, and only re-renders components that use changed state. Quick Start npm install zustand import { create } from ' zustand ' ; const useStore = create (( set ) => ({ count : 0 , increment : () => set (( state ) => ({ count : state . count + 1 })), decrement : () => set (( state ) => ({ count : state . count - 1 })), reset : () => set ({ count : 0 }), })); function Counter () { const count = useStore (( state ) => state . count ); const increment = useStore (( state ) => state . increment ); return < button onClick = { increment } > { count } < /button> ; } That's it. No <Provider> , no reducer, no action types, no dispatch. Why Zustand Wins Feature Zustand Redux Toolkit Context API Boilerplate ~5 lines ~

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles