State

🔍 What Is It?

State is data that:

1. Changes over time — user interactions, API responses, timers
2. Belongs to a specific component — not shared globally by default
3. Triggers a re-render when updated — React re-runs your component function
4. Persists between re-renders — unlike regular variables which reset on every render

In function components, state is managed with the useState hook. For complex state logic, useReducer is used. State can be:

• →Local state — owned by one component (form inputs, toggle open/closed, loading flags)
• →Lifted state — moved to a parent so multiple children can share it
• →Global state — managed outside React via Context, Zustand, or Redux

🎯 Why Do We Need It?

Without state, React components would be static HTML. State is what makes UIs interactive:

• →A button that shows a loading spinner while an API call is in flight
• →A form that tracks what the user is typing
• →A modal that opens and closes
• →A table that shows different data based on the selected filter
• →A counter that increments on click

Every interactive element in your app is driven by state somewhere. The question is not whether to use state — it is where to put it and how to structure it.

🏗️ What Happens in Real Projects?

In a real healthcare portal:

• →Form state — patient registration form tracks name, DOB, insurance ID as the user types
• →UI state — sidebar open/closed, modal visible, active tab
• →Server state — patient records fetched from API (often managed by React Query)
• →Filter state — selected date range, status filter, search term in a claims list
• →Optimistic state — immediately show a status change while the API call is in flight

Most components only need 1–3 state variables. If a component has 10+ useState calls, it is doing too much and should be split.

⚙️ How It Works

useState mechanics:

1. const [count, setCount] = useState(0) — declares state with initial value 0
2. count is the current value — read it in JSX and logic
3. setCount(5) — schedules a re-render with count = 5
4. setCount(prev => prev + 1) — functional update, safe for async contexts
5. React batches multiple setState calls in event handlers (React 18: batches everywhere)

State is a snapshot:

Each render captures a snapshot of state. If you call setCount(count + 1) three times in a row, count is the same value in all three calls — you get count + 1, not count + 3. Use functional updates to avoid this.

State initialisation:

For expensive initial values, use lazy initialisation: useState(() => computeExpensiveValue()) — the function runs only once.

💻 Example

State Patterns in Production — From simple toggles to async state with loading and error handling.

interface AsyncState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

function useClaims(patientId: string) {
  const [state, setState] = useState<AsyncState<Claim[]>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    let cancelled = false;

    setState({ data: null, loading: true, error: null });

    fetchClaims(patientId)
      .then((data) => {
        if (!cancelled) setState({ data, loading: false, error: null });
      })
      .catch((err) => {
        if (!cancelled) setState({ data: null, loading: false, error: err.message });
      });

    return () => { cancelled = true; }; // cleanup prevents setState on unmounted component
  }, [patientId]);

  return state;
}

export function ClaimsList({ patientId }: { patientId: string }) {
  const { data, loading, error } = useClaims(patientId);

  if (loading) return <Spinner />;
  if (error)   return <ErrorBanner message={error} />;
  if (!data?.length) return <EmptyState />;
  return <ul>{data.map(c => <ClaimRow key={c.id} claim={c} />)}</ul>;
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits