Skip to main content

Zustand

Overview#

Zustand is one of the lightest state management libraries.

It's a small, fast, scalable state-management solution using simplified flux principles and has an api based on hooks.

We'll show basic usage of zustand with simple counter example.
Refer to official documentation for detailed usage. →

Usage#

Zustand is known for its simplicity. We don't need to wrap our root code or add any complex setup.

components/ZustandExample/index.tsx
import create from "zustand";
interface Counter {  count: number;  inc: () => void;  dec: () => void;}
export const useStore = create<Counter>((set) => ({  count: 1,  inc: () => set((state) => ({ count: state.count + 1 })),  dec: () => set((state) => ({ count: state.count - 1 })),}));
export const ZustandExample = () => {  const { count, inc, dec } = useStore();  return (    <div>      <button onClick={inc}>up</button>      <span>{count}</span>      <button onClick={dec}>down</button>    </div>  );};

The main function is called create. It accepts a callback function, which accepts a set function that should be used when manipulating memory.

The create then returns a hook, which is called useStore. You can use anywhere in app like so:

const { count, inc, dec } = useStore();

Clicking on the buttons will update state and change count.


note

All required configurations will be handled automatically by CLI as long as you choose Recoil plugin during the project creation phase.

Adding zustand to your project later#

If you didn't choose zustand plugin during project creation phase, you can follow the instructions below to add it.

npm install zustand

Refer to official documentation for installation.