Zustand

Learn lightweight state management with Zustand.

Zustand

Zustand is a lightweight state management framework. It needs much less boilerplate than Redux; no provider, action type or reducer is required. The store is defined in one file and components use it directly as a hook. Install with npm install zustand.

To create a store you call create. The returned value is a hook; components call it to read state. Zustand is very popular for small and medium React Native projects. Its uncomplicated API makes it fast to learn.

Defining the store

In Zustand the store is defined with a call to create. The function takes a callback that receives set and get parameters and returns an object. The returned object carries state fields and action functions.

Example: const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })). Here count is the state, increment is the action. set is used to update state; get reads the current state. To export you simply add export.

Exercise Write the useCounter store

Complete the empty file. Import create from zustand. Define export const useCounter with create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })).

Show example solution

import { create } from 'zustand';

export const useCounter = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Test yourself

What does Zustand reduce?
- The amount of boilerplate code
- Animation quality
- Camera resolution
- The number of styles
Show answer

The amount of boilerplate code — Zustand reduces the amount of boilerplate code.

The create call

export const useCounter = ____((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Show answer

export const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Match each part to its role

create

Creates the store
set

Updates the state
get

Reads the state
useCounter

Used as a hook

Next lesson: create

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies