State: data that changes
State is data that can change over time (e.g. a counter, whether a modal is open). When state changes, the UI updates. Here we mimic that with a simple object and a function that updates it and 're-renders' (logs).
Appy Says…
What makes a webpage interactive? Counters that increment, forms that capture input, toggles that switch themes — it all comes down to state. State is data that changes over time, and when it changes, React updates the UI automatically.
What is React State?
State is data that a component tracks and that can change. When state updates, React re-renders the component with the new data. The useState hook manages state in function components.
- •Import:
import { useState } from 'react'; - •Declare:
const [count, setCount] = useState(0); - •
count— current state value - •
setCount— function to update state - •
useState(0)— initial value is 0 - •Calling
setCount(5)re-renders the component withcount === 5
Think of it like a score counter in a game
In any game, the score display always shows the current score. When you gain points, the display updates automatically. In React, state is the score and useState is the scoring system — change the state, the display updates.
How It Works
- •1.
const [likes, setLikes] = useState(0);creates state - •2. React stores the value between re-renders (not in a regular variable)
- •3.
setLikes(likes + 1)triggers a re-render with the new value - •4. Never modify state directly:
likes++doesn't work — must usesetLikes - •5. Functional update:
setLikes(prev => prev + 1)— safe when new value depends on old - •6. React batches multiple state updates in event handlers for efficiency
Real-World Examples
- •Like button:
const [liked, setLiked] = useState(false); - •Shopping cart count:
const [items, setItems] = useState([]); - •Dark mode toggle:
const [isDark, setIsDark] = useState(false); - •Form input:
const [email, setEmail] = useState(''); - •TikTok's heart animation: state flips from false to true on tap
Key Facts
- •useState is a React Hook — hooks must be called at the top level of a component (not inside if/loops)
- •React schedules re-renders — state doesn't update instantly when you call the setter
- •Multiple
useStatecalls in one component are fine — each is independent - •State is local — two instances of the same component have separate state
Watch Out!
Never mutate state directly: state.push(item) or state.name = 'new' won't trigger a re-render. React can't detect these mutations. Always create a new value: setState([...state, item]) or setState({ ...state, name: 'new' }).
Remember
const [value, setValue] = useState(initial). Call setValue(newValue) to update — never mutate directly. React re-renders the component automatically.
What You Learned
- •useState:
const [val, setVal] = useState(initial)manages component data - •Calling the setter triggers a re-render — never mutate state directly
- •Unlocks: counters, toggles, form inputs, shopping carts, any interactive UI
Key Facts
- →useState is a React Hook — hooks must be called at the top level of a component (not inside if/loops)
- →React schedules re-renders — state doesn't update instantly when you call the setter
- →Multiple
useStatecalls in one component are fine — each is independent - →State is local — two instances of the same component have separate state
Real-World Examples
Remember
const [value, setValue] = useState(initial). Call setValue(newValue) to update — never mutate directly. React re-renders the component automatically.
Quick Quiz
What is state?