Welcome back, React explorer! 🚀
In
, we cracked open the treasure chest called useState and took a peek at its shiny gems. You now know how to declare, update, and render simple state. But hey—React’s state is more than just counters and toggles.
Let’s level up your state game in Part 2! 🎮
We’ll cover some “real-world” scenarios, common mistakes, and a fun mini-project. Ready? Let’s dive in.
🌱 1. Multiple Pieces of State? No Problem!
React lets you track multiple independent values using useState. Think of it like having multiple notepads instead of stuffing everything into one page.
const [name, setName] = useState('');
const [age, setAge] = useState('');
Each useState is totally independent — they won’t interfere with each other. Use this when your variables don’t need to be bundled.
🧠 Tip: Name your state and setters clearly. It makes debugging 100x easier.
🔁2. When Your Update Depends on the Previous Value
Let’s say you have a counter. You click a button twice really fast:
setCount(count + 1);
setCount(count + 1);
Surprise! It only increases by 1 😱
Why? Because setState is asynchronous and React batches updates for performance.
Fix it with the function form:
setCount(prevCount => prevCount + 1);
🧼 3. Don’t Mutate the State Directly 🙅♀️
Tempting, right?
user.name = 'Bob';
🚨 Big No-No. React won’t notice the change and won’t re-render.
Instead, create a new version of the object or array:
setUser(prev => ({ ...prev, name: 'Bob' }));
Same for arrays:
setTasks(prev => [...prev, newTask]);
⏳ 4. State Updates Are Not Instant
Let’s say you do this:
setName('Bob');
console.log(name); // Still prints the old name
That’s because useState updates the state after the component re-renders. The new value will be there on the next render.
🔄 Always think in terms of next render, not next line.
📦 5. Storing Objects & Arrays in State
You’re not limited to strings and numbers!
const [user, setUser] = useState({ name: '', age: 0 });
When updating:
setUser(prev => ({
...prev,
name: 'React Learner',
}));
Arrays? Same deal:
const [tasks, setTasks] = useState([]);
setTasks(prev => [...prev, 'Learn React']);
Always copy the previous state to keep things immutable.
⚠️ 6. Common Mistakes Beginners Make
❌** Mistake **
Directly modifying state (e.g., stateVar = newValue)
Reading updated state right after calling setState
Forgetting to spread objects/arrays
Not using function form for prev-dependent updates
✅** Instead Do**
Use the setter (setState)
Wait for the next render
Use …prevState to copy
Use setCount(prev => prev + 1)
👀 Up Next in Part 3…
In Part 3, we’re rolling up our sleeves to build something real — a simple To-Do App 📝.
We’ll also learn how to pass state around, split components, and build a tiny app that teaches big React lessons.
Ready to turn your knowledge into something interactive?
_
👉 See you in Part 3!_
