useState: Teaching Your App to Remember

So you built a button. Cute. But when you click it... nothing happens. That's because your component doesn't have a memory yet. It doesn't know whether the button was clicked. Enter: state.

Why Does State Matter in Real Life?

Every interactive thing on the internet uses state. Every. Single. One.

• TikTok: The app remembers which video you're on, whether you've liked it, whether the comments are open, and your scroll position. All state.
• Online shopping: Your cart items, the selected size, the color you picked, the quantity — that's all state living in the app's memory until you check out.
• Google Maps: Whether you're viewing the map or satellite, your current search, the route it's showing, whether the side panel is expanded — all state.
• Dark mode toggle: When you flip a switch and the whole app changes from light to dark? That's one piece of state (isDarkMode: true) controlling the entire UI.
• Forms: Every character you type into a text field is state being updated in real time. The app remembers what you've typed so it can validate it, submit it, or clear it.

Without state, websites would be static documents — no interactivity, no memory, no personality. useState is how you bring a dead page to life.

What Is State?

State is your component's memory. It's how your app keeps track of things that can change:

• Is the menu open or closed?
• How many items are in the cart?
• What did the user type in the search box?
• Is dark mode on?

Without state, your app is like a goldfish — it forgets everything instantly.

Your First useState

Here's the simplest example — a counter:

1import { useState } from 'react';
2
3function Counter() {
4const [count, setCount] = useState(0);
5
6return (
7<div>
8<p>You clicked {count} times</p>
9<button onClick={() => setCount(count + 1)}>
10Click me!
11</button>
12</div>
13);
14}

The Two Things useState Gives You

This line is the key to everything:

1const [count, setCount] = useState(0);
2//     ^^^^^  ^^^^^^^^          ^
3//     |      |                 |
4//     |      |                 Starting value
5//     |      Function to UPDATE it
6//     The CURRENT value

A Real Example: Toggle Menu

Here's something you'd actually build — a menu that opens and closes:

1function MobileMenu() {
2const [isOpen, setIsOpen] = useState(false);
3
4return (
5<div>
6<button onClick={() => setIsOpen(!isOpen)}>
7{isOpen ? 'Close Menu' : 'Open Menu'}
8</button>
9
10{isOpen && (
11<nav>
12<a href='/'>Home</a>
13<a href='/about'>About</a>
14<a href='/contact'>Contact</a>
15</nav>
16)}
17</div>
18);
19}

Another Real Example: Like Button

1function LikeButton() {
2const [liked, setLiked] = useState(false);
3
4return (
5<button
6onClick={() => setLiked(!liked)}
7style={{ color: liked ? 'red' : 'gray' }}
8>
9{liked ? 'Liked!' : 'Like'}
10</button>
11);
12}

Multiple States in One Component

You can use useState as many times as you want in a single component:

1function TacoOrder() {
2const [count, setCount] = useState(0);
3const [spicy, setSpicy] = useState(false);
4const [name, setName] = useState('');
5
6return (
7<div>
8<input
9placeholder='Your name'
10value={name}
11onChange={(e) => setName(e.target.value)}
12/>
13<p>{count} tacos for {name || '...'}</p>
14<button onClick={() => setCount(count + 1)}>Add Taco</button>
15<button onClick={() => setSpicy(!spicy)}>
16{spicy ? 'Make it mild' : 'Make it spicy'}
17</button>
18</div>
19);
20}

Quick Recap

• State = your component's memory (things that can change)
• useState(initialValue) gives you [value, setValue]
• Call the setter function to update state (never modify directly)
• When state changes, React re-renders the component automatically
• You can use multiple useStates in one component
• Common patterns: counters, toggles, form inputs