Demon Tech Roadmap

React

React useState Hook

The useState Hook creates state variables in functional components.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

Developers use the `useState` Hook to add memory to a component. It returns two things: the current value of the state, and a function specifically designed to update that value safely.

Example

1/* this uses state */
2import { useState } from "react";
3
4function Counter() {
5  const [count, setCount] = useState(0);
6  return <button onClick={() => setCount(count + 1)}>Count is {count}</button>;
7}

Key Points

Import `useState` from the `react` library.
The Hook returns an array with a variable and a setter function.
Never modify the state variable directly.
Always use the setter function (like `setCount`) to update it.

Up Next

Continue your journey with the next topic.

Go to React useEffect ❯