pmndrs/zustand

🔥 Hot★ 58,047TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

Mindmap

mindmap
  root((Zustand))
    What it does
      Shared state store
      Direct component access
      Automatic re-renders
    How to use
      Create store function
      Subscribe with hooks
      Modify state directly
    Key features
      No providers needed
      Tiny bundle size
      TypeScript support
      Middleware support
    Use cases
      Multi-component data
      App-wide settings
      Async actions
      Persistent state
    Tech stack
      React
      TypeScript
      JavaScript

mindmap root((Zustand)) What it does Shared state store Direct component access Automatic re-renders How to use Create store function Subscribe with hooks Modify state directly Key features No providers needed Tiny bundle size TypeScript support Middleware support Use cases Multi-component data App-wide settings Async actions Persistent state Tech stack React TypeScript JavaScript

Things people build with this

USE CASE 1

Build a React app where multiple components need to share and update user settings or theme preferences without prop drilling.

USE CASE 2

Create a shopping cart that persists across page navigation and updates in real-time across all components showing cart contents.

USE CASE 3

Manage async API calls and loading states globally so any component can trigger a fetch and display results without lifting state up.

USE CASE 4

Add logging or persistence middleware to automatically save state changes to localStorage or send them to an analytics service.

Tech stack

TypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Zustand is a small state management library for React applications. The problem it addresses is that as a React app grows, different components need to share data with each other, and passing that data manually through every component in the tree becomes unwieldy. Libraries like Redux have historically solved this but require a lot of boilerplate setup code and ceremony. Zustand offers a much simpler alternative: you define your shared state as a store using a single function call, and any component can read from or write to that store directly using a React hook without wrapping your application in special provider components. The way it works is that you create a store by calling a create function and passing it an object containing your state values and the functions that modify them. Components subscribe to specific slices of that state using the store hook, and Zustand automatically re-renders only the components that depend on the part of the state that changed, not the entire tree. This makes it efficient even for large applications. The library is small, roughly two kilobytes in size when bundled, and has no dependencies beyond React itself. Zustand also handles trickier scenarios correctly, such as concurrent rendering in React 18 and the zombie child problem where stale data in parent components can cause child components to render with wrong state. It supports asynchronous actions, middleware for adding functionality like logging or persistence, and subscribing to state changes outside of React components for imperative code. The library is written in TypeScript. You would choose Zustand when you need a clean, low-friction way to share state across a React application without the verbosity of Redux or the re-rendering overhead of React's built-in Context API.

Copy-paste prompts

Prompt 1

Show me how to create a Zustand store for a todo app with add, remove, and toggle functions, then use it in a React component.

Prompt 2

How do I set up Zustand middleware to automatically save my store state to localStorage and restore it on page load?

Prompt 3

Create a Zustand store that fetches user data from an API and handles loading and error states, then show how to use it in a component.

Prompt 4

How do I subscribe to Zustand store changes outside of React components, like in a service or utility function?

Prompt 5

Show me how to use Zustand's selector pattern to make a component only re-render when a specific part of the state changes.

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.