Typorithm · easy

useState

react-usestatereactusestatestaterender

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn useState

Hooks

useState(initial) returns [value, setter]. Reading value renders the current state; calling the setter re-renders the component with the new value. State is local to the component and preserved across renders.

useState is the basic hook for local component state. You call it with an initial value and get back an array of exactly two things: the current value and a setter function, which you destructure into [count, setCount].

Calling the setter — setCount(count + 1) — tells React the value changed, so it re-renders the component and the JSX reflects the new state. The initial argument is used only on the very first render; after that the stored value persists.

When the next value depends on the previous one, pass an updater function instead: setCount(c => c + 1). React calls it with the latest state, which avoids bugs from stale closures when several updates batch together.

useState returns [value, setter].

The setter re-renders with the new value.

State is local and preserved across renders.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Import the hook

useState is imported from react before it can be called inside a component.

import { useState } from "react";

2. State + setter

useState returns a pair: the current value and a setter function, destructured here.

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

3. Initial value

The argument is the initial state, used only on the first render.

useState(0)

4. Update state

Calling the setter schedules a re-render with the new value.

setCount(count + 1)

5. Read state

The current state value is read directly in JSX and stays in sync across renders.

{count}

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.