🪝 State Management with Hooks

Why Hooks?

A plain function component is stateless: it runs, returns JSX, and forgets everything. But real UIs need memory — a counter's value, a form's inputs, whether a menu is open. Hooks, introduced in React 16.8, are special functions that let a function component "hook into" React features like state and lifecycle.

Before Hooks, only class components could hold state, and reusing stateful logic between components was awkward. Hooks made function components fully capable and are now the recommended way to write React. You can always spot one: a Hook is a function whose name starts with use.

💡 Analogy. A function component without Hooks is like a whiteboard wiped clean every time you look away. useState is a sticky note that survives the wipe — React keeps it for you between renders and hands it back each time the component runs.

useState: Local State

useState declares a piece of state. It returns an array with exactly two items — the current value and a function to update it — which you destructure:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 0 is the initial value

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Calling setCount does two things: it stores the new value, and it tells React to re-render the component. On the next render, useState(0) hands back the updated value, not the initial one — React remembers it.

State can hold any value — a number, string, boolean, array, or object:

const [name, setName] = useState('');
const [isOpen, setIsOpen] = useState(false);
const [items, setItems] = useState([]);
const [user, setUser] = useState({ name: '', email: '' });

Updating State Correctly

State updates have two behaviors that surprise newcomers. Understanding them prevents a whole class of bugs.

State is treated as immutable

Never mutate state directly — always pass a new value to the setter. React detects changes by comparing references, so mutating in place won't trigger a re-render:

// ❌ Mutating — React won't notice, no re-render
items.push(newItem);
setItems(items);

// ✅ Create a new array
setItems([...items, newItem]);

// ✅ Updating an object — spread the old, override the field
setUser({ ...user, email: 'new@site.com' });

Updates are asynchronous and batched

Calling a setter does not change the variable immediately — React schedules the update and may batch several together. This code only increments once, because all three calls read the same stale count:

// ⚠️ Reads stale value three times → +1, not +3
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

When the next value depends on the previous one, use a functional update — pass a function that receives the latest state:

// ✅ Each call gets the freshest value → +3
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);

useEffect: Side Effects

Rendering should be pure — it just computes JSX from props and state. Anything that reaches outside React is a side effect: fetching data, setting a timer, subscribing to an event, or manually touching the DOM. useEffect is where those belong.

import { useState, useEffect } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);

    // Cleanup: React runs this before re-running the effect and on unmount
    return () => clearInterval(id);
  }, []); // empty deps → run once after the first render

  return <p>{time.toLocaleTimeString()}</p>;
}

The dependency array controls when it runs

Fetching data

A classic effect: load data when a value changes. Note the cleanup flag to avoid setting state after the component has moved on (a common source of race-condition warnings):

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    setLoading(true);

    async function load() {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      if (active) {
        setUser(data);
        setLoading(false);
      }
    }
    load();

    return () => { active = false; }; // ignore a stale response
  }, [userId]); // re-fetch whenever userId changes

  if (loading) return <p>Loading…</p>;
  return <h2>{user.name}</h2>;
}

The Rules of Hooks

Hooks rely on being called in the same order on every render — that's how React matches each useState call to its stored value. Two rules keep that guarantee:

1. Only call Hooks at the top level. Never inside loops, conditions, or nested functions. If a Hook is sometimes skipped, React loses track of which state is which.
2. Only call Hooks from React functions. That means function components or your own custom Hooks — not regular JavaScript functions.

// ❌ Conditional Hook — breaks the call order
function Bad({ show }) {
  if (show) {
    const [value, setValue] = useState(0); // ⛔ not top-level
  }
}

// ✅ Hook at the top level; put the condition inside
function Good({ show }) {
  const [value, setValue] = useState(0);
  if (!show) return null;
  return <p>{value}</p>;
}

useReducer: Complex State

When several pieces of state change together, or the next state depends on the previous in intricate ways, many useState calls get unwieldy. useReducer centralizes that logic in a single reducer function — the same idea Redux popularized, built right into React.

A reducer takes the current state and an action, and returns the next state. You trigger changes by dispatching actions:

import { useReducer } from 'react';

const initialState = { count: 0, step: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.value };
    case 'reset':
      return initialState;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+{state.step}</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-{state.step}</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

useState or useReducer?

Both are valid; useReducer shines when update logic is worth naming and testing in one place. It also pairs beautifully with Context to manage app-wide state, which is exactly where the next lesson heads.

Hands-on Exercise

import { useState, useEffect } from 'react';

function LiveSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (query.trim() === '') {
      setResults([]);
      return;
    }

    let active = true;
    setLoading(true);

    // Debounce: wait 300ms after the last keystroke
    const timer = setTimeout(async () => {
      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
      const data = await res.json();
      if (active) {
        setResults(data);
        setLoading(false);
      }
    }, 300);

    return () => {
      active = false;
      clearTimeout(timer);
    };
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search…"
      />
      {loading && <p>Searching…</p>}
      <ul>
        {results.map((r) => (
          <li key={r.id}>{r.title}</li>
        ))}
      </ul>
    </div>
  );
}

Best Practices

Summary & Quiz

📚 Further Reading

• React docs — useState reference
• React docs — useEffect reference
• React docs — You Might Not Need an Effect
• React docs — useReducer reference

🚀 What's Next?

Local state works well within a component, but passing it through many layers gets tedious. Next we'll solve app-wide sharing with the Context API and global state — including how it pairs with useReducer.