Intro to Zustand, thats it!

This content originally appeared on DEV Community and was authored by Vuelancer

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

This content originally appeared on DEV Community and was authored by Vuelancer