You're probably over-engineering your React app's state management. Redux made sense in 2016. But most apps today don't need it. What they actually need is a clear separation between server state and UI state. Tools like React Query or SWR already handle server state beautifully - fetching, caching, syncing, and revalidating data without a single Redux action. For the rest? React Context is usually enough. Here's a simple pattern: const AuthContext = React.createContext(null); export function AuthProvider({ children }) { const [user, setUser] = React.useState(null); return ( <AuthContext.Provider value={{ user, setUser }}> {children} </AuthContext.Provider> ); } That covers most global UI state without the boilerplate of reducers, actions, and middleware. Redux still shines in large-scale apps with complex shared state - but that's a small percentage of what most of us build day to day. Simpler tools mean faster development, easier onboarding, and less code to maintain. What state management approach are you currently using in your React projects - and would you consider simplifying it? #React #JavaScript #WebDevelopment #Frontend #NodeJS #SoftwareEngineering
Is Redux Still Necessary for React State Management?
More Relevant Posts
-
🚀 Excited to share my latest project — a Full-Stack Notes App built with modern web technologies! 📝 In this app, users can: Create, update, and delete notes effortlessly Store data securely using MongoDB Manage application state efficiently with Redux Toolkit Experience a smooth and responsive UI powered by React (Vite) ⚙️ Tech Stack: Frontend: React + Redux Toolkit Backend: Node.js + Express Database: MongoDB Deployment: Vercel (Frontend) & Render (Backend) 💡 Key Highlights: Clean and scalable folder structure RESTful API integration Real-time UI updates using Redux state management Fully deployed and live 🌐 This project helped me strengthen my understanding of: 🔹 State management with Redux 🔹 Backend API development 🔹 Full-stack deployment workflow 🔗 Live Demo: [https://lnkd.in/d9QrGxpi] 🔗 GitHub Repo: [https://lnkd.in/dBupG6qg] Would love your feedback and suggestions 🙌 #React #Redux #MongoDB #NodeJS #Express #FullStackDevelopment #WebDevelopment #JavaScript #MERNStack #Projects
To view or add a comment, sign in
-
You probably don't need Redux. I said what I said. Most React apps don't have a global state problem - they have a server state problem. Fetching, caching, and syncing data from an API is not what Redux was built to solve elegantly. Tools like React Query or SWR handle this beautifully: const { data, isLoading } = useQuery(['user'], fetchUser); That's it. No actions, no reducers, no boilerplate. Pair this with useState or useContext for local/shared UI state, and you've covered 90% of real-world needs - cleaner, faster, and easier to maintain. Redux still shines in complex client-side state scenarios, but those are rarer than we admit. Whether you're building with Node.js backends, .NET/C# APIs, or anything else, your front-end architecture should match the actual complexity of your app - not the complexity you imagine it might need someday. Simpler code is braver code. What was the moment you realized you were over-engineering your state management? #ReactJS #JavaScript #WebDevelopment #Frontend #NodeJS #dotNET
To view or add a comment, sign in
-
𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗢𝗳 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗣𝗜 𝗥𝗼𝘂𝘁𝗲𝘀 When you build full-stack applications, managing separate frontend and backend codebases can be a challenge. Next.js API routes help with this. You can build backend endpoints directly inside your project. You do not need a separate server. Here's how it works: - Frontend: React - Backend: No separate server needed - You create APIs like this: app/api/users/route.js - This maps to: /api/users - You export functions like: • GET • POST • PUT • DELETE - Each function handles a specific HTTP method. You can connect databases directly inside API routes. You control status codes, errors, and responses. Next.js API routes act like your backend layer. This makes development faster and your architecture cleaner. Source: https://lnkd.in/gpxwXx55
To view or add a comment, sign in
-
You don't need Redux anymore. Seriously. For most React apps, Redux adds complexity you never needed in the first place. Two modern tools handle 90% of those use cases cleaner and faster. React Context handles your global UI state - theme, auth, user preferences. TanStack Query handles your server state - fetching, caching, syncing, loading states. Done. Here's a quick example: const { data: user, isLoading } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId), staleTime: 1000 * 60 * 5, }); That single hook replaces actions, reducers, thunks, and manual loading flags. Your store shrinks dramatically overnight. This works great whether your backend is Node.js, .NET, or a C# Web API - TanStack Query is backend-agnostic and just works. Less boilerplate. Better caching. Easier debugging. Happier team. Redux still has its place in large-scale, complex state machines - but that's not most projects. Are you still reaching for Redux by default, or have you made the switch? #React #JavaScript #WebDevelopment #TanStackQuery #Frontend #dotNET
To view or add a comment, sign in
-
Handling 100+ concurrent updates in a React UI. ⚡ Building real-time collaborative features (like a document editor) in the MERN stack is a masterclass in WebSockets. The three biggest hurdles I’ve tackled: 1. Conflict Resolution: Ensuring that when two users edit the same field, the database doesn't break. 2. Socket Management: Properly cleaning up listeners in useEffect to prevent memory leaks. 3. Optimistic UI: Updating the client immediately so the app feels "snappy," even while the Node.js server is still processing the request. Moving beyond simple CRUD apps into real-time systems is where the real fun begins. #NodeJS #SocketIO #ReactJS #FullStackDev
To view or add a comment, sign in
-
-
Understanding Route Handlers in Next.js (App Router) Been working with the Next.js App Router recently, and one feature I think more developers should take advantage of is Route Handlers. They let you build backend logic directly inside your /app directory using the Web Request/Response APIs — no separate API routes needed. Here’s why they’re powerful: 🔵 1. Simple, file‑based backend logic Just drop a route.ts file anywhere inside /app: export async function GET(request: Request) {} Next.js automatically maps it to an API endpoint. Clean, predictable, and colocated with your UI. 🟠 2. Full support for HTTP methods GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS — all supported out of the box. If a method isn’t implemented, Next.js returns 405 Method Not Allowed automatically 🔵 3. Extended NextRequest & NextResponse You get helpers for cookies, headers, URL parsing, redirects, and more — perfect for auth, data validation, and secure server logic. 🟠 4. Smart caching behavior GET handlers can be cached using export const dynamic = 'force-static' Other methods always run dynamically Prerendering stops when you access runtime data (headers, cookies, DB queries, etc.) 🔵 5. Great for Backend‑for‑Frontend (BFF) patterns You can fetch external APIs, sanitize responses, enforce auth, and return exactly what your React components need — all inside the same route segment. Route Handlers feel like the missing piece between frontend and backend. They keep your logic close to your UI, reduce boilerplate, and make Next.js a true full‑stack framework. #Nextjs #ReactJS #WebDevelopment #FullStackDeveloper #JavaScript #TypeScript #APIDevelopment #BackendForFrontend #WebEngineering #CodingTips
To view or add a comment, sign in
-
I haven't touched Redux in any new project for over a year. Here's why I'll never go back. For years, Redux was the default answer to state management in our React apps. Boilerplate everywhere. Actions, reducers, selectors, middleware — just to fetch a list of users. 😅 Here's what actually replaced it for us: ⚡ Zustand — for global UI state. Tiny, zero boilerplate, just works. Our devs actually enjoy using it. 🔄 TanStack Query — for server state. This alone killed 80% of our Redux usage. Caching, refetching, loading states — handled out of the box. 🧩 React Context — for lightweight shared state that doesn't change often (theme, auth, locale). The result? ✅ Less code ✅ Faster onboarding for new devs ✅ Easier to debug ✅ The team is actually happy writing state logic Redux isn't "bad" — it solved real problems at scale. But for most modern apps, it's simply overkill. The ecosystem has moved on, and so have we. 🙌 Are you still using Redux? Or have you made the switch? Drop your stack below 👇 #frontend #reactjs #webdevelopment #statemanagement
To view or add a comment, sign in
-
-
Refactored a production React Native app - here's what changed. The original architecture stored every API response in Redux and persisted the entire store to AsyncStorage. It worked. But something always felt off. 𝗧𝗵𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺: Server state and client state were treated the same way. Every screen refetched on mount. Every user had to sit through a loader. It might make the heavier over time. 𝗪𝗵𝗮𝘁 𝗜 𝗰𝗵𝗮𝗻𝗴𝗲𝗱: * Redux now only holds auth token + cart * All API calls migrated to TanStack Query * Removed AsyncStorage persistence for server data 𝗪𝗵𝗮𝘁 𝗜 𝘀𝗮𝘄 𝗶𝗺𝗺𝗲𝗱𝗶𝗮𝘁𝗲𝗹𝘆: * Screen revisits went from loader → instant * Data always fresh * So many lines of boilerplate replaced with a single hook * App launch noticeably faster 𝗕𝘂𝘁 𝘁𝗵𝗲 𝗿𝗲𝗮𝗹 𝗹𝗲𝘀𝘀𝗼𝗻: Not every technology is wrong. They're just wrong for the wrong problem. Ask this before managing state in your app: "Is this client state or server state?" → Client state = Redux ✅ → Server state = TanStack Query ✅ That one question changes your entire architecture. Have you ever run into this same problem? Or are you still storing API responses in Redux? Would love to hear how you're managing state in your apps #ReactNative #TanStackQuery #Redux #MobileDevelopment #JavaScript #TypeScript
To view or add a comment, sign in
-
If your audience was Kenyan, they would wonder what does a political party (ODM) have to do with Web Development...ODM stands for Object Document Mapping should be disambiguated from Orange Democratic Movement
Senior Full-Stack Engineer · React / Next.js / NestJS / AWS · Shipped AI features used by 290K+ companies (Fathom) · TypeScript · Node.js · OpenAI API · System Design · Open to Remote EU/US
How frontend actually talks to backend 🤔 When you click a button in a React app, a lot happens behind the scenes: – React sends a request (fetch/axios) – Node.js (Express) receives it – Server processes logic – MongoDB stores or retrieves data – Server sends response – UI updates From user perspective it’s just one click From developer perspective it’s a full system working together ⚙️ That’s what I enjoy about full-stack development, connecting all parts into one working flow Still learning every day 🤓 What part do you find most interesting: frontend or backend?
To view or add a comment, sign in
-
-
Most React apps use global state way more than they should. And it slowly kills performance. 🛑 When a small “User Settings” change re-renders your Navbar, Sidebar, and Dashboard—that’s not scaling. That’s a red flag. 🧠 𝗧𝗵𝗲 𝗿𝘂𝗹𝗲 𝗼𝗳𝘁𝗲𝗻 𝗶𝗴𝗻𝗼𝗿𝗲𝗱: 👉 Keep state as close to where it’s used as possible. 📊 𝗔 𝘀𝗶𝗺𝗽𝗹𝗲 𝗵𝗶𝗲𝗿𝗮𝗿𝗰𝗵𝘆 𝗳𝗼𝗿 𝘀𝘁𝗮𝘁𝗲: 1️⃣ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗦𝘁𝗮𝘁𝗲 → The default choice. const [isOpen, setIsOpen] = useState(false); Don’t push this into a global store just because you can. 2️⃣ 𝗟𝗶𝗳𝘁𝗲𝗱 𝗦𝘁𝗮𝘁𝗲 → Only when siblings truly need to share data. Move it to the nearest common parent. 3️⃣ 𝗟𝗼𝗰𝗮𝗹 𝗖𝗼𝗻𝘁𝗲𝘅𝘁 → Feature-level state. Use it for complex forms or data tables, not the entire application. 4️⃣ 𝗚𝗹𝗼𝗯𝗮𝗹 𝗦𝘁𝗼𝗿𝗲 → Reserved for truly global data. Authentication, themes, or persistent user profiles only. ⚠️ 𝗚𝗹𝗼𝗯𝗮𝗹 𝘀𝘁𝗮𝘁𝗲 𝗶𝘀 𝗲𝗮𝘀𝘆 𝘁𝗼 𝘀𝘁𝗮𝗿𝘁 𝘄𝗶𝘁𝗵—𝗮𝗻𝗱 𝗲𝘅𝗽𝗲𝗻𝘀𝗶𝘃𝗲 𝘁𝗼 𝗺𝗮𝗶𝗻𝘁𝗮𝗶𝗻. 🎯 𝗧𝗵𝗲 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Lifting state too high creates "Prop Drilling." Pushing it too low creates "State Syncing" issues. The goal is balance. Clean architecture isn't about how the code looks; it's about how the system behaves at scale. 💬 𝗪𝗵𝗮𝘁’𝘀 𝗼𝗻𝗲 𝘁𝗵𝗶𝗻𝗴 𝘆𝗼𝘂 𝗿𝗲𝗴𝗿𝗲𝘁 𝗽𝘂𝘁𝘁𝗶𝗻𝗴 𝗶𝗻 𝗴𝗹𝗼𝗯𝗮𝗹 𝘀𝘁𝗮𝘁𝗲? 𝗟𝗲𝘁'𝘀 𝘀𝘄𝗮𝗽 𝘀𝘁𝗼𝗿𝗶𝗲𝘀 𝗯𝗲𝗹𝗼𝘄. 👇 #ReactJS #FrontendArchitecture #SoftwareEngineering #CleanCode #WebPerformance #JavaScript #SystemDesign #WebDev
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
URLs for top-level state (gives you deep linking too), Tanstack-Query for server state. Zustand for global state, if required for more complex UI.Context + useReducer for complex components.