State Management in React

State management in React means handling and updating data that changes over time and making sure the UI re-renders correctly when that data changes.

Examples of state:

• Form inputs

• Logged-in user info

• Shopping cart items

• Theme (dark/light)

• API response data

• Counter values

Simple Interview Definition

“State management in React is the process of storing, updating, and sharing application data across components while ensuring the UI stays synchronized with the data.”

What is State in React?

State is a mutable object/value that belongs to a component.

When state changes:

1. React detects the change

2. React re-renders the component

3. UI updates automatically

Example:

const [count, setCount] = useState(0);

• count → current state

• setCount → function to update state

Basic Example

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

What happens internally?

When button is clicked:

1. setCount() updates state

2. React creates updated virtual DOM

3. React compares old vs new virtual DOM

4. Only changed parts are updated in real DOM

Types of State in React

1. Local State

Managed inside one component.

const [name, setName] = useState("");

Used for:

• Inputs

• Toggles

• Modals

• Counters

2. Shared State

State shared between components.

Usually handled by:

• Lifting state up

• Context API

• Redux/Zustand/Recoil

3. Global State

Application-wide state.

Examples:

• Logged-in user

• Theme

• Notifications

• Cart data

Managed using:

• Context API

• Redux

• Zustand

• MobX

How React State Management Works Internally

Step 1: State is Stored

React stores state internally for each component.

const [count, setCount] = useState(0);

Step 2: State Update is Scheduled

setCount(count + 1);

React does NOT immediately change UI.

Instead:

• React schedules update

• Batches updates for performance

Step 3: Re-render Happens

React re-runs component function:

function Counter() {
  // runs again
}

Step 4: Virtual DOM Comparison

React compares:

• Old virtual DOM

• New virtual DOM

This process is called:

Reconciliation

Step 5: Real DOM Updates

Only changed elements are updated.

Efficient and fast.

State Management Approaches in React

1. useState

Best for:

• Simple local state

Example:

const [isOpen, setIsOpen] = useState(false);

2. useReducer

Best for:

• Complex state logic

• Multiple related state updates

Example:

const initialState = { count: 0 };

function reducer(state, action) {
  switch(action.type) {
    case "increment":
      return { count: state.count + 1 };

    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, initialState);

3. Context API

Used to avoid prop drilling.

Example:

• Theme

• Authentication

const ThemeContext = createContext();

Access anywhere:

const theme = useContext(ThemeContext);

4. Redux

Popular external state management library.

Best for:

• Large applications

• Predictable state flow

Core concepts:

• Store

• Actions

• Reducers

• Dispatch

Flow:

UI → Action → Reducer → Store → UI Update

5. Zustand / Recoil / MobX

Modern lightweight alternatives.

Popular because:

• Less boilerplate

• Simpler than Redux

Lifting State Up

When multiple child components need same data:

• Move state to common parent

• Pass via props

Example:

Parent
 ├── Child A
 └── Child B

Parent manages shared state.

Prop Drilling Problem

Passing props through many levels:

App → Parent → Child → GrandChild

Problems:

• Hard to maintain

• Verbose

Solutions:

• Context API

• Redux

• Zustand

State vs Props

Feature	State	Props
Mutable?	Yes	No
Owned by	Component itself	Parent component
Can update?	Yes	Read-only
Purpose	Dynamic data	Passing data

Important Interview Concepts

1. State Updates are Asynchronous

setCount(count + 1);
console.log(count); // old value

React batches updates.

2. Functional Updates

Safer for previous state dependency:

setCount(prev => prev + 1);

3. Immutable Updates

Never mutate state directly.

❌ Wrong:

state.name = "John";

✅ Correct:

setState({
  ...state,
  name: "John"
});

4. Single Source of Truth

Keep shared state centralized.

Helps consistency.

Common Interview Question

Q: When would you use Context API vs Redux?

Context API

Use when:

• Small-medium app

• Simple global state

• Theme/authentication

Redux

Use when:

• Large application

• Complex business logic

• Heavy state interactions

• Need debugging/middleware

Performance Considerations

Large state updates can cause unnecessary re-renders.

Optimization techniques:

• React.memo

• useMemo

• useCallback

• State splitting

• Selector patterns

Real-World Example

E-commerce App

Local State

Product quantity selector

Shared State

Filters between components

Global State

Shopping cart
Logged-in user
Theme

Interview-Friendly Summary

“React state management is the mechanism used to handle dynamic data in components and synchronize the UI with data changes. React provides built-in solutions like useState, useReducer, and Context API, while larger applications often use external libraries like Redux or Zustand for global state management.”