This content originally appeared on DEV Community and was authored by Mourya Vamsi Modugula
When people start learning React, they often hear: “You need Redux!”
But here’s the truth: not every app needs Redux.
Redux is great, but it’s also extra code, setup, and concepts to maintain. Let’s break it down.
❌ When NOT to Use Redux
If your app is small, you probably don’t need it.
Examples:
- A to-do app where only one component manages state.
- A theme toggle (dark/light mode).
- A form where values don’t need to be shared globally.
👉 In these cases, just use React’s built-in hooks:
// No Redux needed
import { useState } from "react";
export default function ThemeToggle() {
const [dark, setDark] = useState(false);
return (
<button onClick={() => setDark(!dark)}>
{dark ? "🌙 Dark Mode" : "☀️ Light Mode"}
</button>
);
}
✅ When Redux is a Good Choice
Redux shines in large apps with shared state across many components.
Examples:
- An e-commerce app: cart items, user info, product filters.
- A chat app: messages, notifications, online users.
- A dashboard: global filters, real-time data, API caching.
Here, having one predictable place for state makes life much easier.
🚀 Modern Redux = Redux Toolkit
If you do need Redux, don’t write boilerplate reducers/actions manually.
Use Redux Toolkit (RTK) — the official way to write Redux today.
Example: a simple counter:
// store/counterSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface CounterState {
value: number;
}
const initialState: CounterState = { value: 0 };
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
increment: (state) => { state.value += 1 },
decrement: (state) => { state.value -= 1 },
addBy: (state, action: PayloadAction<number>) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, addBy } = counterSlice.actions;
export default counterSlice.reducer;
Hooking it up in a component:
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement, addBy } from "./store/counterSlice";
export default function Counter() {
const count = useSelector((state: any) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => dispatch(increment())}>➕</button>
<button onClick={() => dispatch(decrement())}>➖</button>
<button onClick={() => dispatch(addBy(5))}>+5</button>
</div>
);
}
Much cleaner than old Redux boilerplate 🎉
💡 Best Practices
- Store only shared/global state in Redux.
- Keep UI state (like modals, dropdowns) in local
useState. - Use RTK Query for API data fetching & caching (built into Redux Toolkit).
- Don’t overcomplicate — sometimes Context API is enough.
🔑 Takeaway
Redux is not a must for every project.
- Small apps →
useState/useContext. - Medium apps → Context + hooks.
- Large apps → Redux Toolkit for predictable state management.
👉 Remember: The right use of Redux is knowing when not to use it.
This content originally appeared on DEV Community and was authored by Mourya Vamsi Modugula
Mourya Vamsi Modugula | Sciencx (2025-10-03T02:54:27+00:00) 🧐 Do You Really Need Redux?. Retrieved from https://www.scien.cx/2025/10/03/%f0%9f%a7%90-do-you-really-need-redux/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.