Skip to main content

useState Hook in React

useState​

The useState hook allows you to add state to functional components, making it possible to manage state without using class components.

import React, { useState } from "react";

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

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

In this example:

  • We import the useState hook from React.
  • We define a state variable count and an update function setCount using the useState hook.
  • The initial value of count is set to 0.
  • We use the setCount function to update the count state when the button is clicked.

Setting Up The Initial State​

The initial state is the value that the state variable will have when the component mounts for the first time.

The most common way to set up the initial state is to pass the initial value directly to the useState hook.

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

Lazy Initialization: For resource-intensive state initialization, use a function in useState. This ensures the computation runs only once during the initial render, unlike placing the logic in the component body, which executes on every re-render.

// Lazy initialization: only executed once during the initial render
const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem("count");
  return savedCount ? parseInt(savedCount, 10) : 0; // Default to 0 if no value in localStorage
});

Updating The State​

The state can be updated using the update function returned by useState.

  1. Direct Update: Pass a new value directly to update function returned by useState. This replaces the current state with the provided value.

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

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

  2. Functional Updates: Use a function when the new state depends on the previous state. This ensures the update is based on the latest state value, even if updates are batched or asynchronous.

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

      const increment = () => {
        setCount((prevCount) => prevCount + 1); // Updates based on the previous state
      };

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

Batching In React​

React optimizes performance by batching state updates. This means multiple state updates triggered within the same event handler are combined into a single render, minimizing re-renders.


Updating Different States In A Single Event Handler​

When you update multiple state variables in one event handler, React batches these updates and performs a single re-render after the handler finishes.

const [count, setCount] = useState(0);
const [name, setName] = useState("Guest");

const updateState = () => {
  setCount((prev) => prev + 1); // Increases count by 1
  setName("John"); // Updates name to "John"
  console.log(count, name); // Logs old values due to batching
};

return <button onClick={updateState}>Update</button>;

In the above example,

  • Both setCount and setName are executed in the same event handler.
  • React batches these updates and re-renders the component only once, after the handler finishes.
  • The console.log statement still logs the old state because the state update is applied after the re-render.

Updating the Same State Multiple Times In An Event Handler​

If you update the same state multiple times in one event handler, the state variable retains its current value within the handler until the next re-render. To ensure updates depend on the latest state, use functional updates.

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

const incrementTwice = () => {
  setCount(count + 1); // Adds 1 to the current count
  setCount(count + 1); // Adds 1 again to the same current count
};

const incrementCorrectly = () => {
  setCount((prev) => prev + 1); // Increments based on the latest state
  setCount((prev) => prev + 1); // Increments again based on the updated state
};

return (
  <div>
    <button onClick={incrementTwice}>Increment Twice (Wrong)</button>
    <button onClick={incrementCorrectly}>Increment Twice (Correct)</button>
    <p>Count: {count}</p>
  </div>
);

In the above example,

  • incrementTwice: Both updates use the same count value, so the count increases by 1 instead of 2.
  • incrementCorrectly: By using functional updates ((prev) => prev + 1), each update works on the latest state, so the count increases by 2

Asynchronous Behavior In Batching​

React batches updates in synchronous code, but updates in asynchronous code (like setTimeout or promises) are not batched in older React versions (pre-React 18) unless you use the flushSync API. Starting with React 18, batching extends to asynchronous updates as well.

Example (React < 18):

import React, { useState } from "react";
import { flushSync } from "react-dom";

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

  // Without flushSync
  const asyncUpdateWithoutFlushSync = () => {
    setTimeout(() => {
      setCount((prev) => prev + 1); // Triggers a render
      setCount((prev) => prev + 1); // Triggers another render
    }, 1000);
  };

  // With flushSync
  const asyncUpdateWithFlushSync = () => {
    setTimeout(() => {
      flushSync(() => setCount((prev) => prev + 1)); // Batches the update
      flushSync(() => setCount((prev) => prev + 1)); // Batches the update
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={asyncUpdateWithoutFlushSync}>Async Update (Without flushSync)</button>
      <button onClick={asyncUpdateWithFlushSync}>Async Update (With flushSync)</button>
    </div>
  );
}

export default AsyncUpdateExample;

Example (React 18+):

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

const asyncUpdate = () => {
  setTimeout(() => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    // Both updates are batched; count increments by 2 in a single render
  }, 1000);
};

return <button onClick={asyncUpdate}>Async Update</button>;

Updating State Objects and Arrays​

React's useState hook doesn't automatically merge updates to objects or arrays. When working with complex state like objects or arrays, you need to update them immutably—creating a new object or array instead of modifying the existing one.


Updating State Objects​

When updating an object, ensure you copy the existing properties into a new object and then update the specific properties that need to change.

function UpdateObjectExample() {
  const [user, setUser] = useState({ name: "Guest", age: 35 });

  const updateName = () => {
    setUser((prevUser) => ({
      ...prevUser, // Copy all existing properties
      name: "John", // Update only the 'name' property
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={updateName}>Change Name</button>
    </div>
  );
}

Updating State Arrays​

When updating arrays, avoid directly modifying them (e.g., using push or splice). Instead, create a new array with the required changes.

  1. Adding Items to an Array

    const [items, setItems] = useState([1, 2, 3]);

    const addItem = () => {
      setItems((prevItems) => [...prevItems, 4]); // Add 4 to the end of the array
    };

  2. Removing Items from an Array

    const [items, setItems] = useState([1, 2, 3]);

    const removeItem = (indexToRemove) => {
      setItems(
        (prevItems) => prevItems.filter((_, index) => index !== indexToRemove) // Remove item by index
      );
    };

  3. Updating an Item in an Array

    const [items, setItems] = useState([
      { id: 1, value: "A" },
      { id: 2, value: "B" },
    ]);

    const updateItem = (idToUpdate, newValue) => {
      setItems((prevItems) =>
        prevItems.map(
          (item) => (item.id === idToUpdate ? { ...item, value: newValue } : item) // Update matching item
        )
      );
    };

Immer​

Immer is a small JavaScript library that makes working with immutable state easier.

Instead of manually copying and updating arrays or objects immutably, Immer allows you to "mutate" a draft of the state directly, and it produces the new updated state for you.

The produce method in the below example creates a draft of the previous state. produce(prevState, (draft) => {...})

import React, { useState } from "react";
import produce from "immer";

function Example() {
  const [state, setState] = useState({
    user: { name: "Guest", age: 35 },
    items: [1, 2, 3],
  });

  const updateState = () => {
    setState((prevState) =>
      produce(prevState, (draft) => {
        // Update the user object
        draft.user.name = "John";
        draft.user.age = 36;

        // Update the items array
        draft.items.push(4);
      })
    );
  };

  return (
    <div>
      <p>
        User: {state.user.name}, Age: {state.user.age}
      </p>
      <p>Items: {state.items.join(", ")}</p>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}