Name: Short Intro To Zustand, State Management Library
Rating: 1.8 (276 reviews)
Author: vuelancer

Short Intro To Zustand, State Management Library

Vuelancer - Sep 16 -

- Dev Community

Introduction

Zustand is a small state management library that provides React hooks to manage the state. It is based on the Flux pattern like Redux but similar to how Redux simplified the original Flux pattern, Zustand simplifies it even further. For example, here is how you would set up a simple store with a count value and an action to increase it.


import { create } from 'zustand'

const useCounterStore = create((set) => ({
  counter: 0,
  increment: () => set((state) => ({ counter: state.counter + 1 })),
}));

const Counter = () => {
  const counterStore = useCounterStore();
  return (
    <div>
      <p>
        Counter: {counterStore.counter}
      </p>
      <button onClick={counterStore.increment}>+</button>
    </div>
  )
}

Will update more after trying it out