State Management

State management is the set of patterns and tools used to hold and change an application's data, and to keep the interface consistent with it. State includes form values, the logged-in user, fetched server data, whether a modal is open, and similar facts.

Why it matters

In small apps, state lives inside the component that uses it. As an app grows, several distant components need the same data, and passing it down through many layers becomes painful (prop drilling). Choosing where state lives, who may change it and how changes flow decides how predictable and debuggable the app is. Useful distinctions are local versus global state, and client state versus server state, which is better handled by a data-fetching cache.

Example

// Local state in React
const [count, setCount] = useState(0);

// Shared state with a store (Zustand-style)
const useCart = create((set) => ({
  items: [],
  add: (item) => set((s) => ({ items: [...s.items, item] })),
}));

Any component calling useCart() receives updates when the items change.

Common mistakes

• Putting everything in a global store when local state would do.
• Duplicating the same data in two places, which then drift apart.
• Mutating state directly instead of creating new values.
• Treating cached server data as hand-managed client state.

Related

• Redux
• Component
• React
• Single-page application

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.