This content originally appeared on DEV Community and was authored by Werliton Silva
Tchaca is a junior dev who just entered the React world.
On a normal workday, she faced a question:
“I need to manage some state in my component… but should I use
useStateoruseReducer?”
This is a super common question - even experienced devs get confused sometimes.
Let’s follow Tchaca’s journey and understand when to use each one, with simple day-to-day analogies.
✅ When to use useState
useState is like a sticky note: you write something simple, stick it on the screen, and whenever you need, you can update what’s written there.
It’s perfect for small and straightforward things, like:
🧪 Example 1 (Beginner ✅): Toggle light/dark theme
const [darkMode, setDarkMode] = useState(false);
return (
<button onClick={() => setDarkMode(prev => !prev)}>
Mode {darkMode ? 'Dark' : 'Light'}
</button>
);
👉 Why useState?
It’s just a sticky note with one word: Light or Dark. Easy to swap.
🧪 Example 2 (Beginner ✅): Store username
const [username, setUsername] = useState('');
<input
type="text"
value={username}
onChange={e => setUsername(e.target.value)}
/>
👉 Why useState?
It’s just a text box holding one word. Nothing complex.
🧪 Example 3 (Intermediate 🚀): Simple form
const [form, setForm] = useState({ name: '', email: '' });
const handleChange = (e) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
👉 Why useState still works?
The form is small. You can still manage it with a sticky note without a mess.
🧩 When to use useReducer
Now imagine that instead of a sticky note, you need a manual of instructions to organize many changes in the same state.
That’s where useReducer comes in: it helps centralize and organize logic.
It shines when state is complex: big forms, shopping carts, multiple state transitions.
🧪 Example 4 (Intermediate 🚀): Shopping cart
const initialState = [];
function cartReducer(state, action) {
switch (action.type) {
case 'add':
return [...state, action.item];
case 'remove':
return state.filter(item => item.id !== action.id);
default:
return state;
}
}
const [cart, dispatch] = useReducer(cartReducer, initialState);
👉 Why useReducer?
If it were a sticky note, it would get messy. With a manual, you know exactly what to do when someone adds or removes an item.
🧪 Example 5: Complex form
const initialState = {
step: 1,
values: { name: '', email: '' },
errors: {}
};
function formReducer(state, action) {
switch (action.type) {
case 'next':
return { ...state, step: state.step + 1 };
case 'setField':
return {
...state,
values: { ...state.values, [action.field]: action.value }
};
case 'setError':
return {
...state,
errors: { ...state.errors, [action.field]: action.error }
};
default:
return state;
}
}
const [formState, dispatch] = useReducer(formReducer, initialState);
👉 Why useReducer?
It’s like building a puzzle: multiple pieces need to fit together. The reducer organizes everything in one place.
🧪 Example 6: Multiple state transitions
const initialState = {
mode: 'view',
data: null,
loading: false,
error: null
};
function viewReducer(state, action) {
switch (action.type) {
case 'edit':
return { ...state, mode: 'edit' };
case 'save':
return { ...state, loading: true };
case 'success':
return { ...state, loading: false, data: action.data, mode: 'view' };
case 'error':
return { ...state, loading: false, error: action.error };
default:
return state;
}
}
👉 Why useReducer?
Here the sticky note won’t cut it. It’s like managing multiple browser tabs: you need a manual to know what to do in each situation.
🎯 The complexity scale
Think of it like this:
- ✅
useState→ Sticky note (simple, quick). - ⚖️ Middle ground → You can still use
useState, butuseReduceralso works. - 💡
useReducer→ Manual of instructions (many steps, multiple options).
🚧 Things to watch out for
| Hook | Pros | Cons |
|---|---|---|
useState |
Simple, direct, less boilerplate | Hard to scale |
useReducer |
Organizes more complex logic | More verbose, more code |
🔄 From useState to useReducer(Side by Side)
Tchaca first tried to solve her problem using useState.
It felt natural: she just created one state for each thing she needed to track.
Using useState
const [mode, setMode] = useState("view");
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleEdit = () => setMode("edit");
const handleSave = () => setLoading(true);
const handleSuccess = (newData) => {
setLoading(false);
setData(newData);
setMode("view");
};
const handleError = (err) => {
setLoading(false);
setError(err);
};
👉 At first, this looked clean and simple. Each variable had its own setter, easy to follow.
But as her app grew, Tchaca noticed the state transitions were scattered everywhere.
It was getting harder to see the “big picture” of how state was changing.
That’s when she learned about useReducer.
Using useReducer
const initialState = {
mode: 'view',
data: null,
loading: false,
error: null
};
function viewReducer(state, action) {
switch (action.type) {
case 'edit':
return { ...state, mode: 'edit' };
case 'save':
return { ...state, loading: true };
case 'success':
return { ...state, loading: false, data: action.data, mode: 'view' };
case 'error':
return { ...state, loading: false, error: action.error };
default:
return state;
}
}
const [state, dispatch] = useReducer(viewReducer, initialState);
👉 With this approach, all possible state changes lived in one single function.
It was easier for Tchaca to reason about the flow of her component and maintain it as the logic expanded.
Diff
🧠 Key takeaway
-
useState→ Great when things are simple and independent. -
useReducer→ Better when logic gets more complex, since everything is centralized.
🧠 Conclusion
In the end, Tchaca learned there’s no absolute rule.
- If the state is simple, use a sticky note →
useState. - If the state starts to get complex, use a manual of instructions →
useReducer.
👉 The secret is to keep your code easy to read, maintain, and scale.
📌 Challenge for you:
Build a simple to-do list with useState. Then refactor it to use useReducer and compare which version feels clearer to you.
This content originally appeared on DEV Community and was authored by Werliton Silva
Werliton Silva | Sciencx (2025-08-21T13:23:00+00:00) Master React State: When to Use useState vs useReducer (No More Confusion). Retrieved from https://www.scien.cx/2025/08/21/master-react-state-when-to-use-usestate-vs-usereducer-no-more-confusion-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.