No history yet

Introduction to React useState

Giving Components a Memory

By default, React components have a short-term memory. They render, display some UI, and then forget everything. If a piece of information inside a component changes, React doesn't automatically know it needs to update the view. It's like a function that runs and then discards all its local variables.

But what about interactive elements? Think about a counter that tracks clicks, text typed into a search bar, or whether a menu is open or closed. Components need a way to remember and manage this kind of changing information. This "memory" is what we call state.

State allows a component to remember information between renders. When the state changes, React automatically re-renders the component to reflect the new reality.

Meet the useState Hook

In functional components, we manage state using special functions called Hooks. The most fundamental of these is the useState Hook. It's a direct way to declare a piece of state that your component can keep track of.

With useState, React helps you keep track of values that can change—like a name after a button click.

To use it, you first need to import it from React. Then, you call it inside your component.

import { useState } from 'react';

function Counter() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0);
  // ...
}

Let's break down that one line, because it's packed with meaning.

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

We're calling the useState function and passing it an initial value of 0. This is the value our state will have when the component first renders.

useState returns an array with exactly two items, which we capture using array destructuring syntax:

  1. count: The current value of our state variable. The first time our component loads, this will be 0.
  2. setCount: A special function that lets us update the value of count. This is the only correct way to change the state.

Putting It to Work

Seeing useState in a full component makes it click. Let's finish building our Counter. We want to display the current count and have a button that increases it by one when clicked.

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

Here's the sequence of events:

  1. Initial Render: The Counter component is rendered. useState(0) is called, so the count variable is 0. The user sees "You clicked 0 times".
  2. User Click: The user clicks the button.
  3. State Update: The handleClick function is called, which then calls setCount(count + 1). Since count is currently 0, this is setCount(1).
  4. Re-render: Calling the setCount function tells React that the component's state has changed. React then re-renders the Counter component.
  5. New Render: When Counter runs again, useState now knows the current value of our state is 1. It returns [1, setCount]. The component's output is now "You clicked 1 times".

This cycle is the core of interactivity in React. You declare a piece of state, change it with its setter function in response to an event, and React takes care of updating the user interface.

Quiz Questions 1/4

What is the primary purpose of 'state' in a React component?

Quiz Questions 2/4

In the code const [value, setValue] = useState('initial');, what does useState return?