zustand

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.