Back to articles
Zustand Has a Free State Manager: Simple React State Without Providers, Reducers, or Boilerplate

Zustand Has a Free State Manager: Simple React State Without Providers, Reducers, or Boilerplate

via Dev.to ReactAlex Spinov

Redux needs actions, reducers, action creators, selectors, middleware, and a Provider wrapper. Context API re-renders every consumer when any value changes. You just want shared state that works. What if global state was a single function call? No Provider. No reducer. No boilerplate. That's Zustand. 1KB, no dependencies, works with React out of the box. The Simplest Store import { create } from " zustand " ; interface CounterStore { count : number ; increment : () => void ; decrement : () => void ; reset : () => void ; } const useCounter = create < CounterStore > (( set ) => ({ count : 0 , increment : () => set (( state ) => ({ count : state . count + 1 })), decrement : () => set (( state ) => ({ count : state . count - 1 })), reset : () => set ({ count : 0 }), })); // Use in ANY component — no Provider needed function Counter () { const count = useCounter (( state ) => state . count ); const increment = useCounter (( state ) => state . increment ); return < button onClick = { increme

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles