🪝 useState Hook in Functional Components

What the Hook Gives You

Before hooks arrived in React 16.8, only class components could hold state. Hooks changed that: useState lets a plain function component "remember" a value between renders and re-render itself when that value changes — with no class, no this, and far less ceremony.

💡 The hotel-safe analogy: Calling useState is like renting a small safe. You put something in (the initial value), you get a way to look at what's inside (the state variable), and you get a passcode to change the contents (the setter). Only your component can open this safe, and each component instance gets its own.

A hook is just a special function whose name starts with use that lets you "hook into" React features from a function component. useState is the most fundamental one — the foundation the others build on.

Anatomy of useState

You call useState with the initial value and it returns an array of exactly two things, which you destructure by convention into [value, setValue]:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Behind the scenes: React stores the current value outside your function and hands it back on each render. When you call the setter, React saves the new value and schedules a re-render, during which useState returns the updated value.

Working with Different Data Types

State can hold anything a JavaScript variable can. Here it is with a string driving a controlled input — the input's value comes from state, and every keystroke updates state:

function Greeter() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  );
}

A boolean makes a natural toggle, and you can hold several independent pieces of state by calling useState more than once:

function LikeButton() {
  const [likes, setLikes] = useState(0);
  const [isLiked, setIsLiked] = useState(false);

  const handleLike = () => {
    setLikes(prev => (isLiked ? prev - 1 : prev + 1));
    setIsLiked(prev => !prev);
  };

  return (
    <button onClick={handleLike} style={{ color: isLiked ? 'crimson' : 'gray' }}>
      {isLiked ? '❤️' : '🤍'} {likes}
    </button>
  );
}

Functional Updates & Batching

Here is the single most important useState subtlety. Within one render, the state variable is a fixed snapshot — it does not change value just because you called the setter. And React batches multiple updates in the same event handler into one re-render. Both facts bite in this classic bug:

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

  const addThree = () => {
    setCount(count + 1); // count is 0 here → schedules 1
    setCount(count + 1); // count is STILL 0 → schedules 1
    setCount(count + 1); // count is STILL 0 → schedules 1
  };
  // Result: count becomes 1, not 3
  return <button onClick={addThree}>Count: {count}</button>;
}

Because count is frozen at 0 for the whole handler, all three calls compute 0 + 1. The fix is the functional update form: pass the setter a function that receives the latest pending value and returns the next one.

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

  const addThree = () => {
    setCount(prev => prev + 1); // 0 → 1
    setCount(prev => prev + 1); // 1 → 2
    setCount(prev => prev + 1); // 2 → 3
  };
  // Result: count becomes 3 ✅
  return <button onClick={addThree}>Count: {count}</button>;
}

The same rule saves you inside timers and other async callbacks, where the captured count would otherwise be stale by the time the callback runs:

const delayedIncrement = () => {
  setTimeout(() => {
    // Uses whatever the latest value is, not the one captured 2s ago
    setCount(prev => prev + 1);
  }, 2000);
};

Updating Objects & Arrays

Unlike a class component's this.setState, the useState setter replaces the value — it does not merge. And you must treat state as immutable: never mutate the existing object or array, always create a new one. React decides whether to re-render by comparing references, so an in-place mutation is invisible to it.

const [user, setUser] = useState({ name: 'Ada', email: 'ada@x.com' });

// ❌ Wrong: this REPLACES the whole object, dropping `name`
setUser({ email: 'new@x.com' });

// ❌ Wrong: mutating in place — React sees the same reference, won't re-render
user.email = 'new@x.com';
setUser(user);

// ✅ Right: spread the old object, override one field
setUser(prev => ({ ...prev, email: 'new@x.com' }));

A single change handler can drive a whole object of form fields by using the input's name as a computed key:

function ProfileForm() {
  const [profile, setProfile] = useState({ name: '', email: '', bio: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProfile(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      <input name="name"  value={profile.name}  onChange={handleChange} placeholder="Name" />
      <input name="email" value={profile.email} onChange={handleChange} placeholder="Email" />
      <textarea name="bio" value={profile.bio}  onChange={handleChange} placeholder="Bio" />
    </form>
  );
}

Arrays follow the same principle — reach for the non-mutating methods (map, filter, spread) rather than push, splice, or index assignment:

const [tasks, setTasks] = useState([]);

// Add
setTasks(prev => [...prev, newTask]);

// Remove by id
setTasks(prev => prev.filter(t => t.id !== id));

// Update one item
setTasks(prev =>
  prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
);

Lazy Initial State

The argument you pass to useState is only used on the first render, but if you pass a value produced by a function call, that function runs on every render (its result is just ignored after the first). When the computation is expensive — parsing localStorage, building a big structure — pass a function instead so React calls it only once.

// ❌ readAndParse() runs on every render, even though only the first matters
const [prefs, setPrefs] = useState(readAndParse());

// ✅ Lazy: the initializer function runs once, on the first render only
const [prefs, setPrefs] = useState(() => {
  const saved = localStorage.getItem('preferences');
  return saved ? JSON.parse(saved) : { theme: 'light', fontSize: 'medium' };
});

The Rules of Hooks

React relies on hooks being called in the same order on every render, so it can match each useState call to the right stored value. Two rules keep that guarantee:

1. Only call hooks at the top level. Never inside conditions, loops, or nested functions — the number and order of hook calls must be identical every render.
2. Only call hooks from React functions. That means function components or your own custom hooks, not plain JavaScript functions.

function Bad({ loggedIn }) {
  if (loggedIn) {
    const [name, setName] = useState(''); // ❌ conditional hook call
  }
  // If loggedIn flips between renders, hook order changes → React errors
}

Hands-on Exercise

import { useState } from 'react';

function SignUpForm() {
  const [form, setForm] = useState({ name: '', email: '', password: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  // Derived — never stored in state
  const isValid =
    form.name.trim() !== '' &&
    form.email.includes('@') &&
    form.password.length >= 8;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!isValid) return;
    alert(`Welcome, ${form.name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Name" />
      <input name="email" type="email" value={form.email} onChange={handleChange} placeholder="Email" />
      <input name="password" type="password" value={form.password} onChange={handleChange} placeholder="Password (8+ chars)" />
      <button type="submit" disabled={!isValid}>Sign up</button>
    </form>
  );
}

Common Pitfalls

Summary & Quiz

📚 Further Reading

• React Docs — useState Reference
• React Docs — State as a Snapshot
• React Docs — Updating Objects in State

🚀 What's Next?

State lets a component remember values, but real apps also need to talk to the outside world — fetch data, set timers, subscribe to events. Next up: Component Lifecycle and Effects, where the useEffect hook synchronizes your component with everything beyond React.