Ditch useEffect for data fetching in React with React Query

“set (𝙧𝙚𝙫𝙖𝙡𝙞𝙙𝙖𝙩𝙚: 𝟲𝟬) and move on” This works in Next.js — until it doesn’t. Now you’re: • serving stale data for up to 60s • re-fetching even when nothing changed • adding load for no reason This is where caching stops being an optimization — and becomes about 𝘄𝗵𝗼 𝗼𝘄𝗻𝘀 𝗳𝗿𝗲𝘀𝗵𝗻𝗲𝘀𝘀. At a high level: 𝗦𝘁𝗮𝘁𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → speed 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → freshness 𝗖𝗮𝗰𝗵𝗶𝗻𝗴 + 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 → where we balance the two But this abstraction starts to break down at scale. 👉 𝗧𝗶𝗺𝗲-𝗯𝗮𝘀𝗲𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲) periodically refetches data This works well when data becomes stale in predictable intervals Think dashboards, blogs, or analytics snapshots 👉 𝗢𝗻-𝗱𝗲𝗺𝗮𝗻𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗧𝗮𝗴, 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗣𝗮𝘁𝗵) flips the model Don't blindly revalidate — react to change In one of our systems, moving from time-based to event-driven invalidation: • reduced redundant fetches significantly • cache behavior became predictable under load This becomes the default once writes are frequent. 👉 𝗙𝘂𝗹𝗹 𝗥𝗼𝘂𝘁𝗲 𝗖𝗮𝗰𝗵𝗲 𝘃𝘀 𝗗𝗮𝘁𝗮 𝗖𝗮𝗰𝗵𝗲 • Full Route Cache → caches the rendered output • Data Cache → caches the underlying fetch calls That separation is powerful: Don't rebuild the entire page — refresh just the data 🧠 𝗠𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 𝗦𝘁𝗼𝗽 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝘁𝗶𝗺𝗲 → 𝘀𝘁𝗮𝗿𝘁 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝗲𝘃𝗲𝗻𝘁𝘀 Instead of → “𝘳𝘦𝘷𝘢𝘭𝘪𝘥𝘢𝘵𝘦 𝘦𝘷𝘦𝘳𝘺 𝘟 𝘴𝘦𝘤𝘰𝘯𝘥𝘴” Think → “𝘸𝘩𝘢𝘵 𝘦𝘷𝘦𝘯𝘵 𝘴𝘩𝘰𝘶𝘭𝘥 𝘮𝘢𝘬𝘦 𝘵𝘩𝘪𝘴 𝘥𝘢𝘵𝘢 𝘴𝘵𝘢𝘭𝘦?” ❓Interested to hear how this plays out in write-heavy or multi-region setups. #NextJS #Caching #ReactJS #WebDevelopment #FullStack #JavaScript #SoftwareEngineering #SystemDesign #FrontendDevelopment

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

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

Building a web scraper sounds easy... until the website actually fights back. 😅 I just wrapped up a massive data extraction project for Zameen.com and honestly, it was a rollercoaster. I went in expecting a standard HTML parsing job, but modern web apps are built different. First, my own Laptop betrayed me Windows Defender kept nuking my Playwright browser on launch. Once I figured out how to route the bot through my system Chrome to bypass that, I hit the real boss level: Next.js. Zameen's frontend is so advanced that the clean JSON data (__NEXT_DATA__) I was looking for simply didn't exist in the source code anymore. Plus, they hide their phone numbers behind "click to reveal" buttons specifically to block scripts like mine. I ended up having to completely scrap my original code and build a "Hybrid Extractor." I programmed Playwright to actually click around the UI like a real human, while a custom JavaScript engine visually read the screen and hunted down hidden SEO schemas to pull the Agent data. It was incredibly frustrating at times, but watching the terminal finally spit out perfectly clean, structured data after days of troubleshooting was the best feeling. Web scraping is a totally different game now that React Server Components are the standard. Has anyone else been battling Next.js apps lately? Let me know your workarounds! 👇 Also The hard part is over, now I just have a massive JSON file full of clean real estate data. Data engineers and analysts: what is the coolest thing I should do with this dataset? Drop your project ideas below! 💡👇

🚀 Day 15/30 – Lifting State Up (Deep Dive) Struggling to sync data between components? 🤔 Today I learned one of the most important React concepts ⚡ 👉 Lifting State Up Today I learned: ✅ Move state to the closest common parent ✅ Share data via props ✅ Maintain single source of truth 💻 Real Example: function Parent() { const [name, setName] = useState(""); return ( <> </> ); } function ChildInput({ name, setName }) { return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } function ChildDisplay({ name }) { return Hello {name}; } 🔥 What actually happens: 1️⃣ User types in ChildInput 2️⃣ setName updates parent state 3️⃣ Parent re-renders 4️⃣ ChildDisplay gets updated value 👉 Both components stay perfectly in sync 💡 Wrong Approach (Common Mistake): ❌ Separate state in each component function ChildA() { const [name, setName] = useState(""); } function ChildB() { const [name, setName] = useState(""); } 👉 This creates inconsistent UI 😵 ⚡ Real Use Cases: Shared form data Cart state across components Filters + product list sync ⚡ Advanced Insight: React enforces one-way data flow 👉 Parent → Child (via props) 🔥 Key Takeaway: If multiple components depend on same data → lift it up. Are you still duplicating state or managing it correctly? 👇 #React #StateManagement #FrontendDevelopment #JavaScript #WebDevelopment

🚀 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

Your dashboard is slow because you're over-fetching. Here's how React Query + pagination fixed it. 📉 I inherited a dashboard that made 50+ API calls on every page load. Users waited 4+ seconds. The fix? Stop fetching what you don't need. Stale-while-revalidate strategy: - Show cached data instantly (stale). - Fetch fresh data in background (revalidate). - User sees something immediately, then updates silently. Prefetching user actions: - Hover over a tab? Prefetch that data. - Mouse over a pagination button? Prefetch next page. - User never waits. Reducing API calls by 60%: - One query for list view (paginated). - One query per detail row (only when expanded). - Combined with query keys that invalidate on mutation. Result: dashboard load went from 4 seconds to under 1 second. Users stopped complaining. Do you use React Query or RTK Query? Why? Let me know below 👇 #ReactQuery #Performance #FrontendDev

Bonjour webperf folks! A packed feed again this week: * Tools & Data Max Ostapenko published a public MCP server for the HTTP Archive Tech Report at https://lnkd.in/dTzRZNcy with no API key needed. You can now query CWV distributions, adoption, page weight breakdowns by tech, geo and rank in plain language. His own examples are worth the read: Next.js scores 15 points below React on mobile CWV, Nuxt 11 below Vue, Astro grew +371% in 25 months, SvelteKit ships the least median JS. 👉 [EN] https://lnkd.in/dzR3YfN6 * Web Platform & APIs Cloudflare will ship Compression Dictionary Transport in beta on April 30. On two near-identical JS bundles simulating two deployments, they go from 272 kB uncompressed to 92.1 kB in gzip to 2.6 kB in dcz, down 97% on the wire! 👉 [EN] https://lnkd.in/d_wRHc8a Scott Jehl published part 2 of the series on native HTML video and audio lazy loading, the practical guide. Syntax is <video loading="lazy" src="..." controls>, always set width/height to avoid CLS, and the loading="lazy" autoplay playsinline muted combo is the killer feature: browsers only start autoplay when the video enters the viewport. Behind a flag in Chrome 147, default in Chrome 148 (May 5). The JS pattern of generating <video> on scroll can finally retire 👐. 👉 [EN] https://lnkd.in/dw4dEWsp * Practical reads Amanda Vilela publishes a short, actionable INP checklist sorted by level of effort: keep the DOM under ~1500 nodes, use content-visibility: auto with contain-intrinsic-size, animate only transform and opacity, avoid layout thrashing, debounce vs throttle the right events, audit third-party scripts. 👉 [EN] https://lnkd.in/d_4fnf6a Harry Roberts documents a subtle gotcha: once you declare a font-family on an element, the declaration stands on its own. If the single value fails to load, the browser falls back to its default (Times), not to an inheritable font-family up the tree. His tip: always write a complete font-family stack at every declaration. Small rule, big impact on FOUT/FOIT perception. 👉 [EN] https://lnkd.in/d3Zh8bgq Zach Leatherman rebuilds the same image comparison component several times across web history at State of the Browser 2026. His framing concept: the "interactive dead zone", the gap between when a component is first visible and when it's actually usable. SPAs close it by frontloading everything. SSR widens it by shipping HTML that looks interactive but isn't yet. His proposal: Web Components plus progressive enhancement, using :defined / :not(:defined) to style a usable fallback until the JS registers. 👉 [EN] https://lnkd.in/d5uJHAfa Have a great week!

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 👇

😅 I once changed a value in a “copied” object…... and somehow the original data changed too 💥 👉 That’s when I realized… I didn’t understand shallow vs deep copy properly. 🚀 Let’s break it down (this will save you from real bugs) 🧠 Why this matters In JavaScript, objects & arrays are reference types So copying them incorrectly = you might accidentally modify the original data 😬 📦 1. Shallow Copy A shallow copy only copies top-level values 👉 Nested objects are still shared (same reference) So: - Changing top-level → ✅ safe - Changing nested → 💥 affects original too ⚠️ The common mistake You think you created a new object… but deep inside, it’s still pointing to the same memory 😵 🔁 How to create shallow copy • Spread → {...obj} • Object.assign • Array methods → slice, Array.from 🔐 2. Deep Copy A deep copy creates a fully independent clone 👉 Every level is copied 👉 No shared references So: - Changing nested data → ✅ completely safe 🔁 How to create deep copy 👉 structuredClone() (Recommended) - Handles most data types - Modern & reliable 👉 JSON.parse(JSON.stringify()) - Quick but limited - loses functions, Dates, undefined 💡 Real Dev Insight Shallow copy is fast ⚡ Deep copy is safe 🛡️ 👉 Use shallow → for simple data 👉 Use deep → for nested structures 🚀 Final Thought: Most bugs don’t come from logic… 👉 They come from unexpected mutations Understand copying → write safer code 💪 #JavaScript #FrontendDevelopment #WebDevelopment #CodingTips #ShallowCopy #DeepCopy #LearnJavaScript #BuildInPublic #100DaysOfCode #LearnInPublic