One of the first things you learn in React is useState. But just because it’s easy to use doesn’t mean it’s always used correctly.
Over the years, I’ve reviewed hundreds of pull requests where useState caused unnecessary re-renders, stale values, or overly complex state flows. In this post, I’ll walk you through how to use useState the right way—with clarity, predictability, and performance in mind.
✅ Rule #1: Don't store derived state#
Let’s start with this classic mistake:
This looks innocent—but it’s derived state. It should be computed when needed, not stored.
✅ Better:
If you can calculate a value from props or another piece of state, do it inline. Don't mirror state unnecessarily.
🔁 Rule #2: Always use the updater function when relying on previous state#
This is a subtle one, but a common source of bugs:
❌ Bug-prone:
If React batches updates, your count might be stale.
✅ Safer:
🧠 Rule #3: Don't use useState when useRef is a better fit#
If you’re storing a value that doesn’t trigger a re-render—like a timeout ID or external library instance—use useRef, not useState.
📦 Rule #4: Initialize state lazily for expensive operations#
React allows lazy initialization for useState. Use it when your default value is expensive to compute:
The function is only run once, on mount—not on every render.
🔍 Final Thoughts#
useState is simple—but powerful when used well. Follow these rules:
- Don't store derived data.
- Use the updater form.
- Reach for
useReforuseReducerwhen needed. - Keep your state clean and lean.
Every time you write useState, ask: Is this the best place to store this value?
🚀 Takeaway#
React rewards thoughtful state management. If your components feel noisy, hard to debug, or prone to bugs—your useState logic might be the culprit. Clean it up, and your UI (and your team) will thank you.
Check out more best practices on iamcamilotavera.com or follow my dev notes on Twitter.