The useState Hook Fundamentals0%
Updating State and Immutable Updates

The useState Hook Fundamentals

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

The useState Hook Fundamentals

1. Introducing useState

The useState hook is the fundamental tool for introducing local state into a React functional component. It is imported directly from the 'react' package.

JSX
import { useState } from 'react';

2. Anatomy of useState

When you call useState, you pass the initial state value as an argument. It returns an array containing exactly two items:

JSX
const [state, setState] = useState(initialValue);
  1. 1
    The State Variable (state): The current value of the state on this render.
  2. 2
    The Updater Function (setState): A function that updates the state variable and triggers React to re-render the component.

ES6 Array Destructuring

Because useState returns a 2-element array [currentValue, updaterFunction], React developers use ES6 array destructuring to assign custom names:

JSX
// Destructuring the 2-element array
const [count, setCount] = useState(0);
const [name, setName] = useState('Rahul');
const [isOpen, setIsOpen] = useState(false);
const [items, setItems] = useState([]);

Convention: If the state variable is named foo, the updater function is conventionally named setFoo.

3. A Complete Working Example: Interactive Counter

JSX
import React, { useState } from 'react';
 
export default function Counter() {
// Declare state variable 'count' initialized to 0
const [count, setCount] = useState(0);
 
return (
<div className="counter-card">
<h2>Interactive Counter</h2>
<p className="count-display">Current value: {count}</p>
<div className="btn-group">
<button onClick={() => setCount(count + 1)}>
Increment (+)
</button>
<button onClick={() => setCount(count - 1)}>
Decrement (-)
</button>
<button onClick={() => setCount(0)}>
Reset
</button>
</div>
</div>
);
}

4. How useState Works Across Renders

Let's trace what happens when the user clicks "Increment (+)":

  1. 1
    Initial Mount:
  • React executes Counter().
  • useState(0) returns [0, setCount].
  • React renders <p>Current value: 0</p>.
  1. 1
    User Clicks Increment:
  • setCount(0 + 1) is called with value 1.
  • React records the new state for this component instance as 1 and queues a re-render.
  1. 1
    Re-render:
  • React executes Counter() a second time.
  • useState(0) is invoked again, but React remembers that state is now 1! It returns [1, setCount].
  • React renders <p>Current value: 1</p>.
  • React diffs the Virtual DOM and updates the text node in the real DOM from 0 to 1.

5. Lazy Initial State

If your initial state requires an expensive computation (e.g., parsing a large JSON file or reading from localStorage), do not execute the function directly in useState(...) because it will run on every single render:

JSX
// ❌ Inefficient: Reads localStorage on EVERY render
const [token, setToken] = useState(localStorage.getItem('auth_token'));
 
// ✅ Efficient: Lazy initial state function runs ONLY on initial mount
const [token, setToken] = useState(() => {
return localStorage.getItem('auth_token') || '';
});
Interactive Quiz

Practice Quiz

Question 1
What does the useState hook return?
Question 2
What naming convention is universally followed for state updater functions?
Question 3
When does React apply the initial value passed into useState(initialValue)?
Question 4
Why would a developer pass a callback function to useState(() => getInitialData())?
Question 5
What happens if you call setCount(5) when the current count is already 5?
Next Lesson

Updating State and Immutable Updates

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Introduction to Component StateUpdating State and Immutable Updates

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext