From Redux to React Query: Simplifying State Management

I was facing a performance issue in my React application. The problem was simple: Unnecessary API calls. Every time a user navigated between pages, the same APIs were being called again — even when the data hadn’t changed. This led to: • Slower UI • Increased load time • Unnecessary backend load The solution? I replaced useEffect with React Query. Here’s what changed: • API responses started getting cached • No repeated API calls on navigation • Instant UI updates when revisiting pages • No need to manually manage loading and error states Example: User visits Page 1 → Page 2 → back to Page 1 👉 Instead of calling API again, cached data is returned instantly This significantly improved performance — from seconds to milliseconds. This is how modern React applications handle data fetching. 👉 https://lnkd.in/gpc2mqcf 💬 Comment REACT and I’ll share the detailed React Query documentation. #ReactJS #ReactQuery #FrontendEngineering #WebDevelopment #SoftwareEngineering #PerformanceOptimization #JavaScript

🔉 Introducing @void-snippets — Snippets that make boilerplate void If you build React apps, you know this pain: ↳ useQuery for the list ↳ useQuery for the single item ↳ useMutation for the updates... you get the idea. Multiply that by 10+ API resources. It's hundreds of lines of the exact same fetching, caching, and loading logic copied and pasted across your project. What if you just defined your API service once? const contactHooks = createResourceHooks('contacts', ContactsApis); //🔥 Boom. Done. const { contacts, isContactsLoading } = contactHooks.useList(); const { data } = contactHooks.useGet(id); Types infer automatically. Pagination, loading states, and cache invalidation are completely handled. But what about Mutations? Yes—Create, Update, and Delete are all generated for you too. But different API responses? Yes—Checkout adapters in the config object. To see how the mutations work, or to check out the full 3-package architecture (@core, @client, @react), read the full docs and the story behind it on my blog here 👇 https://lnkd.in/g9_n6G7x Or grab it directly: npm install @void-snippets/react If you've written useQuery for the fifth time this week, give it a spin. Would love to hear your feedback! 🙏 #typescript #react #reactquery #tanstackquery #opensource #webdevelopment

Leveling up with React Router: Mastered Nested Routes & Dynamic Data Fetching! ⚛️ I just wrapped up a project focusing on creating a seamless User Directory using React and JSONPlaceholder. This was a deep dive into structured navigation and efficient data handling. Key implementations: 🚀 Dynamic Routing: Used useParams and useNavigate to handle user-specific views. 📂 Nested Routes: Implemented <Outlet /> to render sub-components like Posts, Todos, and Albums without losing parent context. 💾 State Persistence: Utilized location.state to pass user data between routes, reducing redundant API calls. 📡 Async Operations: Handled side effects with useEffect and Axios to fetch data dynamically. Seeing the architecture come together is incredibly satisfying. Onward to the next challenge! Question for the devs: When passing data between routes, do you prefer using location.state for simplicity, or do you prefer fetching by ID in the child component to keep it independent? I’d love to hear your thoughts in the comments! 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic

Modern React apps often need to work with data that lives outside React: browser APIs, global stores, or third-party libraries. That’s exactly where useSyncExternalStore comes in. It’s a specialized hook that lets you safely subscribe to external data sources — while staying compatible with React’s concurrent rendering and avoiding bugs like inconsistent UI state (“tearing”). What is useSyncExternalStore? useSyncExternalStore connects your component to an external store and keeps it in sync. Instead of managing state inside React (useState, useEffect), you: - subscribe to changes - read the current snapshot - let React re-render when data updates const value = useSyncExternalStore(subscribe, getSnapshot); Where: - subscribe → tells React how to listen for changes - getSnapshot → returns current data - optional getServerSnapshot → for SSR React will re-render only when the external value actually changes. useSyncExternalStore is not a “daily hook” — but when you need it, nothing else fits as well. #react #frontend #webdev #javascript #reactjs #hooks

Most React devs handle API state with three loose pieces: loading, error, and data. Nothing stops them from going out of sync. You can have loading=true and error="something failed" at the same time. Technically impossible in a real app, but TypeScript won't save you. Discriminated unions fix this at the type level. You model the entire async lifecycle as one type with four mutually exclusive shapes: - idle - loading - success, with the typed data - error, with the error message TypeScript narrows it correctly in every branch. Accessing data.results in the error state becomes a compile error. Impossible states are now actually impossible. It feels like a small refactor. In practice it eliminates an entire class of bugs from data-fetching components and makes render logic much cleaner to read. I started using this pattern about 2 years ago. Haven't written the three-booleans approach since. What's your go-to for async state in React: discriminated unions, React Query, or something else? #TypeScript #React

⚡ Fetching data in React was painful… until I found TanStack Query. Earlier, my code looked like this: 👉 useEffect + fetch + loading + error + state management. Too much work… for just getting data. Then I learnt about TanStack Query — and everything became simple 🚀 🔹 What is TanStack Query? It’s a library that helps you fetch, cache, and manage server data in React apps. In simple words: 👉 It handles data for you… so you don’t have to struggle. 🔹 Why I like it: ✔ Automatic caching → no repeated API calls ✔ Auto refetching → keeps data fresh ✔ Loading & error handling → built-in ✔ Background updates → smooth user experience ✔ Less code, more power 💪 💡 Before vs After: ❌ Before: useEffect + multiple states + manual handling ✅ After: Just useQuery() and done 🔥 What I learned: Server state is different from UI state… and TanStack Query handles it perfectly. Now my code is: ✔ Cleaner ✔ Faster ✔ Easier to manage If you're building React apps, 👉 TanStack Query is a game changer. Have you tried it yet? Or still using useEffect for data fetching? #ReactJS #TanStackQuery #WebDevelopment #Frontend #JavaScript #Developers #LearningJourney #FullStack

React Query vs Fetch — my experience 🔹 What I was using I was using Fetch for API calls in my projects. It is simple, built-in, and easy to start with. 🔹 Issues I faced As the application started growing, I noticed some problems: writing loading & error logic in every component no caching (same API calling again and again) handling retries manually managing API state becoming messy code duplication in multiple places 🔹 Then I started using React Query I explored React Query to solve these issues. At first, it felt like extra setup, but after using it in real scenarios, it made things much easier. 🔹 Benefits I observed automatic caching built-in loading & error handling background refetching less duplicate API calls cleaner and more maintainable code 🔹 My current approach Fetch / Axios → for making API calls React Query → for managing server state Zustand / Redux → for client state Still learning and improving, but this shift really helped me write better frontend code. What approach are you using in your projects? 👇 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactQuery #SoftwareEngineering #Coding #Developers #TechLearning #CleanCode

🚦 TanStack Router is quietly becoming the best routing solution for React — and here's why you should know about it. Most React developers reach for React Router by default. But if you've ever been annoyed by untyped params, manual data fetching, or messy URL state — TanStack Router solves all of it. 🔑 What is TanStack Router? A modern, framework-agnostic router built for React with a focus on: → Full TypeScript safety (end-to-end) → Built-in data loading before render → Typed & validated URL search params → Optional file-based routing (zero config) → Tiny bundle ✅ Key Advantages 1️⃣ Type-Safe by Default No more useParams() returning string | undefined. Every param, search param, and loader result is automatically inferred by TypeScript — no extra effort needed. 2️⃣ Data Loaders (Fetch Before Render) Stop putting API calls inside useEffect. Define a loader on your route and data is ready before your component ever mounts. Cleaner code, zero loading flicker. 3️⃣ Search Param State Management Treat URL search params like typed state. Validate them with a schema, read them with full type safety — perfect for filters, pagination, and tabs. 4️⃣ Nested Layouts Made Easy Build shared layouts with <Outlet /> just like you would in Next.js — but without needing a full framework. 📦 When Should You Use It? ✔ Starting a new React app without Next.js or Remix ✔ You care deeply about TypeScript correctness ✔ You need URL-driven state (filters, search, pagination) ✔ You want co-located data fetching per route 🧩 Pro tip: Pair it with TanStack Query for data caching and you have a production-ready React stack without a framework. 📖 Docs & playground → tanstack.com/router #React #TanStackRouter #TypeScript #WebDevelopment #Frontend #JavaScript #ReactJS #SoftwareEngineering

You're using React Context wrong - and it's killing your app's performance. Context re-renders every subscriber when state changes. For server data like users, products, or API responses, that's a disaster waiting to happen. Here's the better approach: Use TanStack Query for server state, and useState or useReducer for local UI state. Instead of this pattern: const { user } = useContext(UserContext) Do this: const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser }) TanStack Query gives you caching, background refetching, loading states, and error handling - all out of the box. No Provider wrappers. No unnecessary re-renders. Reserve Context for things that genuinely need to be global and rarely change - like themes or language preferences. The rule is simple: - Server data - TanStack Query - UI state - useState or useReducer - Truly global app state - Context (sparingly) Your components will be faster, cleaner, and easier to maintain. Are you still reaching for Context as your default solution, or have you already made the switch? #React #JavaScript #WebDevelopment #Frontend #ReactQuery #Programming

React Context is not a state management tool - it's a dependency injection mechanism. Using it for frequently changing global state is silently killing your app's performance. Every time context value updates, ALL consuming components re-render. For small apps this is fine. For growing codebases? It becomes a nightmare. Here's a simple Zustand example that solves this cleanly: import { create } from 'zustand' const useStore = create((set) => ({ user: null, setUser: (user) => set({ user }), })) Only components that subscribe to specific slices re-render. No unnecessary updates. No performance headaches. When to use what: - Context: themes, locale, auth flags - Zustand: UI state, shared business logic - Redux: complex apps needing strict data flow and middleware This principle applies across stacks too - whether you're working in React, integrating with a Node.js backend, or consuming APIs from .NET/C# services, clean state architecture matters end-to-end. Keep your Context lean. Let dedicated tools handle the heavy lifting. What's your go-to state management solution in 2026? #React #JavaScript #WebDevelopment #Frontend #Zustand #SoftwareEngineering