State Management Concepts in React

Not all state needs the same treatment. React applications typically deal with three different scopes of state: state that belongs to a single component, state that must be shared between a few related components, and state that many unrelated parts of the app need. Choosing the right tool for each scope keeps an application simple instead of over-engineered.

The general progression is: start with local useState, lift it up when siblings need to share it, and only reach for an external state library once prop drilling or context re-render costs become a real problem — not by default.

Why it matters

Where state lives is the main architectural decision in a React application. Keep it too low and components cannot share it; keep everything in a global store and every change touches the whole application. Most applications need far less global state than people assume, and knowing the options avoids both mistakes.

When Local useState Is Enough

If a piece of state is only read and updated by one component (and maybe its direct children via props), local useState or useReducer is the right and simplest choice. Examples include whether a dropdown is open, the current value of a text input, or a toggle for showing/hiding a section. Reaching for global state here adds indirection and complexity with no real benefit.

Lifting State Up

When two or more sibling components need to reflect or modify the same piece of state, the standard React pattern is "lifting state up": move the state to their nearest common parent, and pass the value down as props along with a setter function (or callback) to update it. This keeps the data flow explicit and predictable — data always flows down through props, and changes flow up through callback functions — without introducing context or an external library.

External State Libraries (Redux, Zustand, and Similar)

When state needs to be read and updated from many unrelated components scattered across the tree, and Context's re-render costs or boilerplate become a burden, an external state management library becomes worth considering. Redux centralizes state in a single store, updated only through dispatched actions and pure reducer functions, which gives strong predictability and excellent debugging tools but comes with more setup and ceremony. Zustand takes a lighter approach: state lives in a small store created with a hook-like function, requires far less boilerplate, and components subscribe only to the specific slices of state they use, which avoids the "everything re-renders" problem that plain Context can have.

• Local useState — single component owns and uses the state.
• Lifted state / Context — a handful of related components, or broadly-needed but rarely-changing data (theme, auth).
• Redux / Zustand — large apps with complex, frequently-updated state shared across many unrelated components.

Examples

import { useState } from 'react';

function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}:{' '}
      <input
        type="number"
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
      />
    </label>
  );
}

function TemperatureSummary({ celsius }) {
  const fahrenheit = (celsius * 9) / 5 + 32;
  return <p>{celsius}°C is {fahrenheit}°F</p>;
}

export default function TemperatureConverter() {
  // State lives in the common parent, not in either child
  const [celsius, setCelsius] = useState(20);

  return (
    <div>
      <TemperatureInput label="Celsius" value={celsius} onChange={setCelsius} />
      <TemperatureSummary celsius={celsius} />
    </div>
  );
}

Renders a number input pre-filled with 20 and a paragraph reading "20°C is 68°F". Typing a new value in the input immediately updates the summary paragraph, because both components read from the same lifted state.

// store.js
import { create } from 'zustand';

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

// Counter.jsx
import { useCounterStore } from './store';

function Counter() {
  // Only re-renders when "count" changes, not on unrelated store updates
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

export default Counter;

Renders a button showing "Count: 0". Each click increments the shared store value; any other component in the app that also calls useCounterStore((state) => state.count) updates in sync, without prop drilling or a Context Provider.

Exercise

Do this in src/App.jsx of a Vite + React project. Two sibling components need the same value: TemperatureInput edits a temperature in Celsius, and BoilingVerdict says whether water would boil at it. Lift the state up into App, passing the value and a change handler to the input and the value to the verdict.

Expected result: typing 100 or more shows "The water would boil"; a lower number shows "The water would not boil".

import { useState } from "react";

function TemperatureInput({ value, onChange }) {
  // TODO: a number input showing value and reporting changes through onChange
  return null;
}

function BoilingVerdict({ celsius }) {
  // TODO: one of the two messages, depending on celsius >= 100
  return null;
}

export default function App() {
  // TODO: the shared temperature state

  return (
    <div>
      {/* TODO: TemperatureInput and BoilingVerdict, both fed from the state */}
    </div>
  );
}

import { useState } from "react";

function TemperatureInput({ value, onChange }) {
  return (
    <input
      type="number"
      value={value}
      onChange={(event) => onChange(Number(event.target.value))}
    />
  );
}

function BoilingVerdict({ celsius }) {
  return <p>{celsius >= 100 ? "The water would boil" : "The water would not boil"}</p>;
}

export default function App() {
  const [celsius, setCelsius] = useState(20);

  return (
    <div>
      <TemperatureInput value={celsius} onChange={setCelsius} />
      <BoilingVerdict celsius={celsius} />
    </div>
  );
}

Quick quiz

Interview questions