State Management

In Turkish: durum yönetimi

Updated October 3, 20262 min read

In short

State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.

What is state management?

State is any data that can change and affects what the user sees. Some of it belongs to one component, such as whether a dropdown is open; some is shared across the app, such as the current user or the items in a cart; and some is a copy of data from the server, such as a list of orders. Each kind is easiest to handle in a different way.

Local state lives in the component that uses it, through tools such as React's useState or Vue's ref. When several distant components need the same data, it moves up to a shared place: React Context, or a store library such as Redux, Zustand, Pinia for Vue, or NgRx for Angular. Components read from the store and update it through clearly defined actions.

Server state has its own problems: caching, loading and error states, refetching and keeping data fresh. Libraries such as TanStack Query and SWR specialize in it, and frameworks increasingly load data on the server instead. Separating server state from client state often removes most of the need for a big global store.

A common misconception is that every app needs a global state library. Many apps work well with local state, a little shared context and a data-fetching library. A store such as Redux pays off when much of the state is shared, updated from many places and needs predictable, debuggable changes.

Key takeaways

State is data that changes and affects what users see.
Local state stays in one component; shared state moves to context or a store.
Redux, Zustand, Pinia and NgRx are common store libraries.
Server state is best handled by data-fetching libraries like TanStack Query.
Not every app needs a global store; start with local state.

Example

A small shared store with Zustand (React)javascript

import { create } from "zustand";

// One store, shared by any component that needs the cart
const useCart = create((set) => ({
  items: [],
  add: (item) => set((state) => ({ items: [...state.items, item] })),
  clear: () => set({ items: [] }),
}));

function CartBadge() {
  const count = useCart((state) => state.items.length);  // re-renders only when count changes
  return <span>{count}</span>;
}

function AddButton({ product }) {
  const add = useCart((state) => state.add);
  return <button onClick={() => add(product)}>Add to cart</button>;
}

Readers ask

Do I need Redux?

Often not. Start with local state and a data-fetching library. Redux, or a lighter store such as Zustand, helps when a lot of state is shared and changed from many parts of the app.

What is the difference between server state and client state?

Client state exists only in the browser, such as an open menu or a draft. Server state is a cached copy of data that really lives on the server and can become out of date, so it needs fetching, caching and refreshing.

What is prop drilling?

Passing data through many layers of components that don't use it, just to reach a deeply nested one. Context or a store avoids it by letting the nested component read the data directly.