useState Hook

Introduction

useState is the Hook you will reach for most often in React. It gives a function component the ability to remember a value between renders and to trigger a re-render whenever that value changes — the foundation of every interactive UI, from a simple counter to a complex form.

This lesson goes beyond the basics you may have already seen. You will learn the correct way to update state based on its previous value, how to update objects and arrays without mutating them directly, and how to avoid wasting performance on an expensive initial value using lazy initialization.

useState Basics

Calling useState(initialValue) returns an array with exactly two items: the current value of the state, and a function to update it. By convention, you destructure this array using array destructuring, naming the pair [value, setValue].

import { useState } from 'react';

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

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

Count: 0
[Increment]

(clicking the button re-renders the component with the updated count)

Calling setCount schedules a re-render of the component with the new value. Unlike a regular variable, count survives between renders — React stores it internally and hands it back to your component function each time it runs.

Functional Updates

State updates in React can be batched and are not always applied immediately. When your new state depends on the previous state, passing a plain value like setCount(count + 1) can read a stale value of count if multiple updates happen close together. The safer approach is a functional update: passing a function to the setter, which React guarantees receives the most up-to-date previous state.

function handleTripleIncrement() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
  // count only increases by 1, not 3 —
  // all three calls read the same stale "count" from this render.
}

function handleTripleIncrement() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  // count correctly increases by 3 —
  // each call receives the latest pending value as "prev".
}

Updating Objects Immutably

React decides whether to re-render by comparing the previous state value to the new one. If you mutate an object in place and pass the same reference back to the setter, React sees no change and will not re-render. Instead, always create a new object — commonly using the spread operator — copying the existing fields and overriding only what changed.

function ProfileForm() {
  const [user, setUser] = useState({ name: 'Amol', age: 25 });

  function updateAge() {
    user.age = 26;       // ❌ mutates the existing object
    setUser(user);        // React sees the same reference — no re-render
  }
}

function ProfileForm() {
  const [user, setUser] = useState({ name: 'Amol', age: 25 });

  function updateAge() {
    setUser(prev => ({ ...prev, age: 26 })); // ✅ new object, same other fields
  }

  return <p>{user.name} is {user.age} years old</p>;
}

Amol is 26 years old

Updating Arrays Immutably

The same immutability rule applies to arrays stored in state. Methods like push, splice, and sort mutate the array in place and should be avoided on state. Instead, use methods that return a new array, such as spreading, map, and filter.

function TodoList() {
  const [todos, setTodos] = useState(['Learn JSX', 'Learn Hooks']);

  function addTodo(text) {
    setTodos(prev => [...prev, text]);              // add: spread + new item
  }

  function removeTodo(index) {
    setTodos(prev => prev.filter((_, i) => i !== index)); // remove: filter
  }

  function editTodo(index, newText) {
    setTodos(prev => prev.map((t, i) => (i === index ? newText : t))); // edit: map
  }

  return (
    <ul>
      {todos.map((todo, i) => <li key={i}>{todo}</li>)}
    </ul>
  );
}

Lazy Initial State

Normally, whatever value you pass to useState is only used on the very first render — but if that value comes from an expensive calculation, that calculation still runs on every single render, only to be thrown away after the first time. React lets you avoid this by passing a function to useState instead of a value; React will call that function only once, on mount, to compute the initial state.

function ProductList() {
  // expensiveFilter() runs on EVERY render, even though
  // its result is discarded after the first one.
  const [items, setItems] = useState(expensiveFilter(allProducts));
}

function ProductList() {
  // expensiveFilter() runs only ONCE, on the initial render.
  const [items, setItems] = useState(() => expensiveFilter(allProducts));
}

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

useState is deceptively simple on the surface, but writing correct, bug-free state updates depends on a few important habits: preferring functional updates when new state depends on old state, always copying objects and arrays instead of mutating them, and using lazy initialization for anything expensive to compute.

With state under control, the next step is learning how to run code in response to state changes and component lifecycle events — which is exactly what the useEffect Hook is for.