Today, I decided to understand the most important hook in React: useState deeply. If you are preparing for an interview or just starting out, useState is the foundation of everything you will build.
Here is how I learned it, broken down into 4 simple examples.
What is useState?
useState is a built-in React Hook that gives functional components their own "memory". Without it, variables disappear when a component re-renders. It returns an array with two things: the current state and a function to update it.
const [state, setState] = useState(initialValue);
import React, { useState } from 'react';
export default function UseStatePlayground() {
// 1. Number State (Counter)
const [count, setCount] = useState(0);
// 2. String State (Input Tracker)
const [name, setName] = useState("");
// 3. Boolean State (Toggle)
const [isVisible, setIsVisible] = useState(false);
// 4. Array State (Shopping List)
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const addItem = () => {
if (inputValue.trim() !== "") {
setItems([...items, inputValue]); // Spread operator to add to array
setInputValue(""); // Clear input after adding
}
};
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h2>React useState Practice</h2>
{/* --- 1. Counter (Number) --- */}
<div style={{ marginBottom: '20px' }}>
<h3>1. Counter</h3>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Add 1</button>
</div>
{/* --- 2. Input Tracker (String) --- */}
<div style={{ marginBottom: '20px' }}>
<h3>2. Input Tracker</h3>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Type your name"
/>
<p>Hello, {name || "stranger"}!</p>
</div>
{/* --- 3. Toggle (Boolean) --- */}
<div style={{ marginBottom: '20px' }}>
<h3>3. Toggle</h3>
<button onClick={() => setIsVisible(!isVisible)}>
{isVisible ? "Hide" : "Show"} Secret
</button>
{isVisible && <p>👑 The secret password is: ReactIsAwesome</p>}
</div>
{/* --- 4. Array (Shopping List) --- */}
<div>
<h3>4. Array List</h3>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Add an item"
/>
<button onClick={addItem}>Add</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
</div>
);
}
Top comments (0)