useState Hook
Overview
useState is the absolute most fundamental Hook in React. A 'Hook' is simply a special built-in React function that allows you to 'hook into' React's internal engine from inside a Function Component.
useState takes one argument (the initial starting value) and returns an array containing exactly two elements. Because it returns an array, we universally use Array Destructuring to immediately grab both elements.
The first element is the current state value (the data). The second element is the setter function (the ONLY tool allowed to change the data).
You can call useState as many times as you want in a single component to track different pieces of independent data (e.g., username, password, isLoading).
Syntax
import { useState } from 'react';
function ProfileEditor() {
// Using Array Destructuring to extract the two items returned by useState()
// [current_data_variable, update_function] = useState(starting_value)
const [username, setUsername] = useState("Guest");
const [age, setAge] = useState(18);
const [isEditing, setIsEditing] = useState(false);
return (
<div>
<p>Name: {username}</p>
<button onClick={() => setUsername("Kartik")}>
Change Name
</button>
</div>
);
}Common Pitfalls
- Calling hooks conditionally: Hooks must be called at the absolute top level of your component. You cannot put
useStateinside anifstatement, inside aforloop, or inside a nested function. React relies on the exact order of hook calls across re-renders to maintain state mapping.
Interview Questions
If it returned an object, like { state, setState }, you would be forced to rename the variables every time you used the hook multiple times in one file using clunky syntax: const { state: age, setState: setAge } = useState(). By returning an array, Array Destructuring allows you to cleanly name the variables whatever you want immediately based on their position: const [age, setAge] = useState().
1. Only call Hooks at the top level of a React Function Component (never inside loops, conditions, or nested functions). 2. Only call Hooks from React Function Components or custom Hooks (not from regular JavaScript functions).
Real-World Example
Multi-Step Form Logic: By storing currentStep in state, we can conditionally render completely different UI sections. When setCurrentStep is called, React instantly destroys Step 1 and renders Step 2 on the screen.
function SignupFlow() {
// Tracking multiple pieces of state independently
const [currentStep, setCurrentStep] = useState(1);
const [email, setEmail] = useState("");
const handleNext = () => {
// We use the setter function to advance the UI
setCurrentStep(currentStep + 1);
};
return (
<div className="wizard">
<h2>Step {currentStep} of 3</h2>
{currentStep === 1 && (
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email"
/>
)}
{currentStep === 2 && <p>Please create a password.</p>}
<button onClick={handleNext}>Continue</button>
</div>
);
}Check Your Knowledge
Test your understanding of useState Hook with these quick questions.