Fixing Slow Dashboard with React Query and Pagination

⚡ Stop writing useEffect for data fetching in React. We've all written this at least once: useEffect(() => { setLoading(true); fetch('/api/users') .then(res => res.json()) .then(data => setData(data)) .catch(err => setError(err)) .finally(() => setLoading(false)); }, []); It works. But you're manually handling things React Query does for free. Here's what your useEffect approach is missing: ❌ No caching — refetches every single mount ❌ No background refetching ❌ No automatic retries on failure ❌ No deduplication of requests ❌ Boilerplate loading/error state every time ✅ The fix? React Query. const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: () => fetch('/api/users').then(r => r.json()) }); That's it. 4 lines replace 15. What you get out of the box: ✅ Smart caching — won't refetch if data is fresh ✅ Background sync — keeps data up to date silently ✅ Auto retry on network failure ✅ Built-in loading & error states ✅ Request deduplication useEffect is great — but it was never meant to be a data fetching tool. Work smarter, not harder. 🚀 #React #ReactQuery #JavaScript #Frontend #WebDevelopment #Performance #Programming

Deep linking from notifications is trickier than it looks. Building push notifications that actually navigate to the right screen in TrackMate revealed three separate problems that felt like one bug. What got fixed: NavigationRef wasn't connected → getInitialNotification() was timing out because the nav container wasn't ready. Fixed by wiring the ref directly to NavigationContainer in App.jsx Backend payload was incomplete → Killed-state notifications returned null because FCM data field was missing. Firebase needs both notification + data fields; data alone doesn't survive app kill FCM config had type errors → APNS headers must be strings ("10", not 10). Android priority needs to be "high", not a number Notification routing by type → Added notificationType to data payload so the app knows whether to navigate to Inbox (messages) or ConversationMap (geofence events) Foreground handler was missing → FCM messages in foreground don't auto-display; had to manually call notifee.displayNotification() to show the sender's profile picture Current blocker: getting duplicate notifications in foreground (Firebase auto-display + Notifee manual display both firing). The insight: Notifications aren't one thing—they're four: data payload structure, platform-specific formatting, timing (foreground vs background vs killed), and client-side routing. A null notification feels like a Socket issue until you check your backend payload structure. And navigationRef timeout feels like a navigation bug until you trace when it's being called. Building with Node.js, Firebase FCM, Notifee, React Navigation. Day 38/40 • #buildinpublic #nodejs #reactnative #javascript #softwaredevelopment

Stop using useEffect for data fetching I know, it's the first pattern every React tutorial teaches. But it's also the source of 80% of the bugs I've reviewed in the last year. Here's the problem: useEffect runs AFTER the render. So your component renders empty → fetches → re-renders with data. That's two renders minimum. Plus race conditions, stale closures, and no error boundary support. The alternatives are better in every way: → React Query / TanStack Query → SWR → Server Components (Next.js, Remix) → Even RTK Query if you're already in Redux These give you caching, deduplication, retry logic, loading states, and error handling. useEffect is a synchronization tool. It's for syncing React state with external systems. Not for fetching data. The React docs even say this. It's not controversial anymore. → https://lnkd.in/dRDj4tTG. If you're starting a new project in 2026 and still writing useEffect + fetch inside components, you're choosing the hardest path on purpose. What's your go-to for data fetching? Drop it below 👇

Fetching data is easy. Handling it like a pro is the hard part. 🔄📡 In the early days of React, we all got used to the "useEffect and Fetch" pattern. But as applications grow, simple fetching isn't enough. Modern users expect zero-latency, instant feedback, and seamless synchronization. Whether I'm using Next.js Server Actions or React Query, these are the 3 principles I follow to manage data like a Senior Developer: 1️⃣ Loading States & Skeletons: Never leave your user staring at a blank screen. I use Suspense and Skeleton Screens to provide immediate visual feedback, making the app feel faster even while the data is still traveling. 2️⃣ Caching & Revalidation: Don't waste your user's data or your server's resources. Implementing smart caching (like stale-while-revalidate) ensures that your UI is updated instantly with "stale" data while the "fresh" data fetches in the background. 3️⃣ Optimistic UI Updates: Why wait for the server to say "Success" before updating a Like button or a Todo item? By using Optimistic Updates, we update the UI immediately and roll back only if the request fails. This creates a "light-speed" user experience. The best apps don't just display data—they manage the flow of data effortlessly. What’s your go-to tool for data fetching in 2026? Are you team React Query, or are you moving everything to Next.js Server Actions? Let’s debate! 👇 #ReactJS #NextJS #WebDev #DataFetching #JavaScript #FrontendArchitecture #CodingTips

I ditched useEffect for data fetching. Here's why I'm not going back. For the longest time, I thought useEffect was the "React way" to fetch data. Loading state? Add a useState. Error handling? Another useState. Race conditions? Then I discovered React Query — and I felt like I'd been writing in hard mode the whole time. Look at the difference: ❌ Before — 15+ lines just to fetch a user. Manual cleanup. Race condition workarounds. Error & loading states all over the place. ✅ After — useQuery. Three lines. Done. Here's what I gained immediately: ⚡ Automatic caching & deduplication — two components needing the same data? One network call. Not two. 🔁 Background refetching — data stays fresh without me writing a single timer or polling loop. 🛡️ Race conditions — handled — no more "old response overwriting new one" bugs. React Query deals with it out of the box. 📉 ~60% less boilerplate — I removed hundreds of lines of state management code across our dashboard in one refactor. The mental shift that helped me: useEffect is for syncing with external systems. It was never meant to be a data fetching tool. React Query is purpose-built for server state — and it shows. If you're still reaching for useEffect every time you need an API call, give React Query one week. You won't look back. What was your turning point with server-state management? Drop it below 👇 #ReactQuery #ReactJS #WebDev #Frontend #JavaScript #SoftwareEngineering

🚀 Stop Managing API State Manually in React! If you're still using `useEffect` + `useState` for API calls… you're doing extra work 😅 Let’s talk about React Query (TanStack Query) 👇 --- 🧠 What is React Query? A powerful library to **fetch, cache, and manage server state (API data)** in React apps. --- ❌ Traditional Way (Problem) * Manual loading & error handling * Repeated API calls * No caching * Complex & messy code --- ✅ With React Query (Solution) * Automatic caching ⚡ * Background refetching 🔄 * Shared data across components 🔗 * Cleaner code 🧹 * Better performance 🚀 --- ⚙️ How it works? 1️⃣ Fetch data 2️⃣ Store in cache 3️⃣ Return instantly on next request 4️⃣ Refetch in background if stale 5️⃣ UI updates automatically --- 🔥 Key Benefits ✔️ Auto caching (no duplicate API calls) ✔️ Faster performance ✔️ Less boilerplate code ✔️ Built-in mutation support (POST/PUT/DELETE) ✔️ Smart retry & error handling ✔️ Data sync across components --- ⚠️ Disadvantages * Learning curve (staleTime, cacheTime) * Not needed for small apps * Slight increase in bundle size --- 🧩 When to Use React Query? ✅ API-heavy applications ✅ Dashboards / Admin panels ✅ Shared data across components ✅ Need performance optimization --- 🚫 When NOT to Use? ❌ Static or simple apps ❌ No backend/API usage ❌ Minimal state management #ReactJS #WebDevelopment #Frontend #JavaScript #ReactQuery #TanStackQuery #SoftwareDevelopment

Are you managing API data in React using useState + useEffect? I used to do the same, At first, it felt simple. But as the app grew to production level, things started getting messy: 1. Multiple loading states 2. Duplicate API calls 3. Manual caching (or no caching at all) 4. Re-fetching logic scattered everywhere 5. Bugs from stale data It worked… but it wasn’t clean. Then I switched to React Query. The biggest shift wasn’t just a library — it was a mindset change: Server state is different from client state With React Query: 1. Data is cached by default 2. Background refetching just works 3. Query invalidation is much cleaner than manually syncing state 4. No need to write repetitive useEffect logic Instead of manually re-fetching after a mutation, I just invalidate the query. Cleaner code. Fewer bugs. Still learning, but this shift made my React code much more predictable. Curious how others are managing server state in their apps.

🧨 You moved everything to Redux. Congratulations. You just created a year of problems. I've seen this scenario hundreds of times. The team is suffering from Props Drilling. Components pass data 10 levels down. Code is unreadable. Everyone is nervous. Then comes the "savior" — State Manager. Redux, Zustand, MobX — doesn't matter. "Let's move everything to global state!" — someone says in a wise voice. 📌 Before You sit with the code. Components look clean. Selectors are neat. Dispatches are hidden. Visually — beautiful. You look at a single component and think: "Well, this is clear. Data comes from a selector. All good." 🔥 Now You try to understand how this whole thing ACTUALLY works. You open a modal. You think — modal logic is inside the modal. And then BAM! Turns out, somewhere in Table, in TableRow, in TableCell, an event is dispatched that clears the form state. And you're like: "Where? Why? What?!" Your eyes pop out of your head. 😨 What's the problem? Global state creates an illusion of order. Components visually became simpler. But coupling grew 10x. Before in React, data flowed top to bottom. You opened a component and saw: "Ah, this data came from parent, this from a hook, this is local." Everything predictable. Now data can be changed from ANYWHERE. Any component can dispatch anything. And you can't do anything about it. ✨ Why is this scary? Because you lose the ability to understand the application as a whole. It's no longer a component tree. It's a tangle of wires where every thread goes into the unknown. I was on a project with two almost identical pages. Just with slightly different data. They were written with Redux. Guess how long it took to make the second page? A week of pure copy-paste. Because reusing components was IMPOSSIBLE. Global state cannot be filled with different data from a different source. People cried crocodile tears. 💻 My position I'm not saying State Managers are evil. I'm saying global state is an anti-pattern. The concept of "global state" shouldn't exist at all. There should be local state lifted outside of React. But not global. Use the Mediator pattern. Limit State Manager usage to special places that can be connected to. Otherwise, you get something worse than Props Drilling. Seriously. I'd rather take a God Component with Props Drilling than a project where everything depends on global state. At least there I understand where data comes from. 🤔 What about you? Been there? Moved everything to Redux and then realized the project turned into a pumpkin? Or do you still think global state is salvation? 👇 P.S. In the next post, I'll talk about the "component folders" anti-pattern — why folders by file type (components/, hooks/, utils/) are killing your project. Write "yes" in the comments — and I'll do it. #ReactJS #Redux #StateManagement #GlobalState #FrontendDeveloper #WebDev #CleanCode #CodeReview #AntiPattern #SoftwareEngineering #ReactHooks

The client-side data waterfall is one of the most common and most avoidable performance problems in React apps. Here's what it looks like in slow motion: 1. Browser downloads HTML 2. Browser downloads JavaScript bundle 3. React renders the shell 4. useEffect fires → fetch user profile 5. Profile arrives → render authenticated content 6. Second useEffect fires → fetch dashboard data 7. Data arrives → render the actual page Steps 4–7 are sequential network requests that happen after the page has already "loaded." On a typical connection, this adds 1–2 seconds of perceived emptiness after the spinner appears. The fix: fetch data where it's closest to the source. In Next.js App Router, server components can fetch data before sending HTML to the browser: ``` // app/dashboard/page.tsx, server component async function DashboardPage() { const [user, data] = await Promise.all([ fetchUser(), fetchDashboardData(), ]); return <Dashboard user={user} data={data} />; } ``` The client receives HTML that already contains the data. No waterfall. No spinner for server-fetched content. Where React Query + server prefetch combines the best of both: ``` // Prefetch in server component await queryClient.prefetchQuery({ queryKey: ['user'], queryFn: fetchUser }); // Client component gets it from cache instantly — no request const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser }); ``` The client component uses its familiar hook pattern. The data is already in the cache from the server fetch. The waterfall isn't a React problem. It's a "fetching in the wrong place" problem. What data fetching pattern has given you the biggest performance gain? #performance #frontend #fintech #web #react

Not everything belongs in Redux - learned this the hard way. Early on, I pushed everything into global state: isModalOpen, activeTab, inputValue. My logic: “What if I need it later?” Reality: I almost never did. The real question isn't "should this be global?" It's — who actually needs this data, right now? One component? → useState Multiple siblings? → lift state up Prop drilling hurts? → Context Many unrelated parts? → Redux / Zustand Server data? → React Query. Not Redux. Never Redux. Navigation-related? → URL state. Not state at all. What actually belongs in global state: Auth session. Cart data. App-wide theme. Notifications from anywhere. The pattern - data multiple unrelated parts of your app need right now. Not data you think they might need someday. What taught me this: → Boilerplate for state that changed twice a day → Components impossible to reuse — wired to the store → Tracing a boolean through 6 files just to open a modal The fix was simpler than I expected: Default to local. Escalate only when the pain is real. useState → lift up → Context → Redux → React Query Each step has a cost. Take it only when the problem forces you to. 2.8 years in - this one mental model saved more debugging hours than any library I've ever learned. Do you reach for global state early, or wait until it actually hurts? #React #JavaScript #MERN #FrontendDeveloper #StateManagement #ReactJS #WebDevelopment