Zustand: A Simpler Way to Share State in React

When learning state management in React, it’s easy to assume that the solution must involve a complex architecture.

Redux introduced a structured system with actions, reducers, and dispatch flows. It solved real problems, but it also introduced a level of ceremony that many developers eventually questioned.

In recent years, the React ecosystem started shifting toward simpler approaches. One of the most popular examples of that shift is Zustand.

Zustand approaches state management with a simple idea: shared state doesn’t need to be complicated.

A Store Outside the Component Tree

In React, local state usually lives inside components.

const [count, setCount] = useState(0)

This works well until multiple components need access to the same state. At that point developers often face prop drilling or reach for Context.

Zustand takes a different approach. Instead of storing state inside components or passing it through providers, Zustand creates a store outside the React component tree.

Components can then subscribe directly to that store.

Defining a Zustand Store

A store in Zustand is created using a single function.

import { create } from "zustand"

const useStore = create((set) => ({
  count: 0,

  increment: () =>
    set((state) => ({
      count: state.count + 1
    }))
}))

This store contains both the state and the actions that modify it.

There is no reducer, no dispatch function, and no additional structure required.

Using the Store in Components

Components interact with the store through the hook returned by create.

function Counter() {
  const count = useStore((state) => state.count)
  const increment = useStore((state) => state.increment)

  return (
    <button onClick={increment}>
      {count}
    </button>
  )
}

The selector function determines which part of the store the component subscribes to.

This means that when the state updates, only the components using that specific slice will re-render.

Selective Subscriptions

One subtle but powerful feature of Zustand is its ability to subscribe to specific pieces of state.

Instead of re-rendering every component that consumes the store, Zustand only updates components that depend on the changed value.

For example, if a store contains multiple properties:

{
  count,
  user,
  theme
}

A component subscribing to count will not re-render when user changes.

This makes Zustand both efficient and predictable.

A Different Philosophy From Redux

Redux emphasizes strict structure and predictable state transitions.

action → reducer → store → UI

Zustand intentionally removes most of that structure.

Instead, the focus is on simplicity:

store → update state → UI reacts

The store is simply a shared piece of state that components can read from and update.

Why Developers Like Zustand

Zustand became popular because it sits in a comfortable middle ground.

It provides the benefits of global state without the complexity of older state management systems.

Developers often appreciate that it:

• requires almost no boilerplate
• works naturally with React hooks
• avoids unnecessary re-renders
• scales from small apps to large applications

Because of this balance, many teams now use Zustand for shared UI state instead of more heavyweight solutions.

Where Zustand Fits in Modern React

State management in React is no longer about choosing a single library for everything.

Different types of state often use different tools.

Local component behavior might rely on useState. Server data might be managed by TanStack Query. Shared client-side state can live inside a store like Zustand.

In that landscape, Zustand serves as a lightweight and flexible option for managing global client state.

It doesn’t try to enforce a strict architecture. Instead, it focuses on making shared state simple, predictable, and easy to integrate into React applications.