Welcome back, React explorer! 🚀
In
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!_
Top comments (2)
Great insights, excited for the next!
Nicely written!