React Query caching causes pagination issues in production

🚨 This small mistake can silently DDOS your own backend This bug appears in many React applications. And it can silently destroy your backend. Example: useEffect(() => { fetch("/api/products") .then(res => res.json()) .then(data => setProducts(data)) }, [products]) Looks normal, right? But this creates a dangerous loop. Here’s what happens: 1️⃣ Component renders 2️⃣ "useEffect" runs 3️⃣ API fetches data 4️⃣ "setProducts()" updates state 5️⃣ Component re-renders 6️⃣ "useEffect" runs again Now the API is called again. And again. And again. Result: ❌ Infinite API calls ❌ Backend overload ❌ Application slowdown The fix is simple. useEffect(() => { fetch("/api/products") .then(res => res.json()) .then(data => setProducts(data)) }, []) Now the effect runs only once when the component mounts. 💡 Small mistakes in "useEffect" dependencies can create huge production issues. Good React engineers don't just write effects. They control when they run. #reactjs #frontend #javascript #webdevelopment #softwareengineering

The difference between a good React developer and a great one? Knowing when to extract logic — and what pattern to reach for. Here's what I've been learning about React composition 👇 🔗 Custom hooks share logic — Every component calling useFetch gets its own independent state. If you want a shared state, that's Context or a state manager. Custom hooks are about reusing behaviour — not syncing data. ⚡ useFetch — three things most engineers miss. Never make the effect itself async. Always check res.ok — fetch doesn't throw on 404 or 500. Use AbortController to cancel stale requests when the URL changes. 🎯 useDebounce — the cleanup IS the magic. The return () => clearTimeout(timer) isn't just cleanup. It's the mechanism that makes debouncing work. Every keystroke resets the timer. Without that cleanup function, it's not debouncing, it's just a delayed call. 🧩 Compound Components — built for design systems. A props blob tries to predict every use case upfront. Compound components let teams compose exactly what they need — zero changes to internals. The secret? Context sharing state between the parent and its sub-components. ⚖️ The decision framework I use Props for 1-2 levels. Context for slow-changing shared data — but split by concern or every consumer re-renders on every change. State manager for complex, frequent updates. React Query for anything that comes from an API. The best platform libraries give teams superpowers without making them think about the internals. Sharing one deep dive at a time. 🚀 #React #CustomHooks #FrontendEngineering #JavaScript #PlatformEngineering #WebPerformance

⚛️ React Performance Tip: Stop Recomputing on Every Render A common mistake in React is recalculating data on every render: ```javascript id="s7dh2k" const processedData = data.map(...); ``` ❌ This runs every time the component re-renders ❌ Leads to unnecessary computation and slower UI Instead, memoize it using `useMemo`: ```javascript id="k39xdl" const processedData = useMemo(() => { return data.map(...); }, [data]); ``` ✅ Runs only when `data` changes ✅ Prevents unnecessary recalculations ✅ Improves performance significantly 💡 Key takeaway: Use `useMemo` when: • Expensive computations • Large datasets • Avoiding repeated work 🚀 Small optimization = big performance boost What’s your go-to React performance trick? #ReactJS #JavaScript #Frontend #Performance #WebDevelopment #Coding

Most developers reach for Redux or NgRx the moment their app has more than two components sharing data. That is one of the most expensive habits in frontend development. Here is what actually happens on most mid-size projects: Myth 1: "Global state = scalable architecture" Not even close. Global state means every part of your app can read and mutate shared data. That is not scalability, that is a debugging nightmare waiting to happen. I have seen enterprise-scale Angular apps where half the NgRx store was holding data that one component used once. Myth 2: "Redux/NgRx is the industry standard so we must use it" The industry standard is using the right tool. React's Context API with useReducer handles 80% of real-world state problems cleanly. Angular's component-level services with signals handle most of the rest. NgRx earns its place in large teams with complex async flows, not in every project by default. Myth 3: "Adding NgRx makes the codebase more maintainable" Only if your team understands actions, reducers, effects, selectors, and facades deeply. I have inherited codebases where NgRx was added for "maintainability" and nobody could trace a single data flow without opening four files. The real question before reaching for a state management library is not "should we use it" but "what problem are we actually solving?" Server state? Use React Query or NgRx Data. Shared UI state across many routes? Then NgRx makes sense. Two sibling components talking? Props or a service. That is it. State management is architecture. Treat it like one. Drop a 👇 if you have inherited a Redux/NgRx setup that nobody on the team could explain. #ReactJS #Angular #NgRx #Redux #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment

🚀 The Event Loop: Browser vs. Node.js 🌐 Ever wondered how JavaScript stays "fast" despite being single-threaded? The secret sauce is the Event Loop. But depending on where your code runs, the Event Loop wears different hats. 🎩 Here is a quick breakdown of how it works on the Client-side vs. the Server-side: 🖥️ 1. JavaScript in the Browser (Client-Side) In the browser, the Event Loop is all about User Experience. The Goal: Keep the UI responsive. How it works: When a user clicks, scrolls, or fetches data, these actions are added to a task queue. The Flow: The Event Loop constantly checks if the Call Stack is empty. If it is, it pushes the next task from the queue to the stack. This ensures that heavy tasks don't "freeze" the screen while rendering. ⚙️ 2. Node.js (Server-Side) In Node.js, the Event Loop is the backbone of High-Concurrency servers. The Goal: Handle thousands of simultaneous requests without blocking. The Heavy Lifters: For "blocking" tasks like File System (FS) or Database operations, the Event Loop offloads the work to Worker Threads (via the Libuv library). The Callback Cycle: 1. The Event Loop registers a callback for an operation. 2. It hands the task to a worker thread. 3. Once the worker is done, it sends the result back to the queue. 4. The Event Loop picks it up and executes the final callback to send the response. 💡 The Bottom Line Whether you are building a snappy UI or a scalable backend, understanding the Event Loop is the difference between a laggy app and a high-performance system. #JavaScript #NodeJS #WebDevelopment #Programming #SoftwareEngineering #TechTips #react #express #next

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

I promised — and I delivered. Here's usePromise: a custom React hook I built that I genuinely believe should be in every developer's project from day one. Let me explain why. The problem nobody talks about openly: Every React developer has written this exact block of code hundreds of times mentioned in the image 👇 It works. It's familiar. And it's been silently violating the DRY principle across every codebase you've ever touched. usePromise replaces all of that with a single hook that handles: ✅ Loading, data, and error state — managed via useReducer to prevent async race conditions ✅ Real request cancellation via AbortController (not just ignoring the response — actually aborting the request) ✅ Data transformation at the configuration level with dataMapper ✅ Lifecycle callbacks — onSuccess, onError, onComplete, and isRequestAbortionComplete ✅ executeOnMount support — fire on render without a single useEffect in your component ✅ Full reset capability — return to initial state cleanly Why not just React Query? React Query is excellent for caching, deduplication, and large-scale data orchestration. But sometimes you want something you fully own — no black boxes, no magic, no dependency debates in code review. usePromise gives you that. It's a foundation you understand end-to-end and can extend however you need. Why should this be standard? SOLID principles tell us: don't repeat yourself. Async data fetching is the most repeated pattern in every React application in existence. The framework gives us the primitives — useReducer, useCallback, useEffect — but leaves the wiring entirely to us. Every team solves this problem. Most teams solve it inconsistently. This hook is the consistent answer. Three years in, and the thing I keep coming back to is this: the first few years of your career build the developer you'll be. The habits, the patterns, the defaults you reach for. Reach for clean ones. Full deep-dive article on Medium including the complete implementation, the Promise lifecycle explained from first principles, and an honest breakdown of trade-offs. This is the medium article for more clarity down below 👇 https://lnkd.in/gJWZhQXk #React #JavaScript #WebDevelopment #Frontend #OpenSource #ReactHooks #CleanCode

🚨 Debouncing won’t fix this React bug You already fixed: ❌ Too many API calls (debounce) But there’s another hidden problem. Even with debounce… Your UI can still show wrong data. Example: useEffect(() => { fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => setResults(data)) }, [query]) User types: a → ap → app → apple Now imagine: Request 1 → slow Request 2 → fast Result: ❌ Old data overrides new data ❌ UI shows incorrect results This is a race condition. --- 💡 Fix: cancel previous requests useEffect(() => { const controller = new AbortController() fetch(`/api/search?q=${query}`, { signal: controller.signal }) .then(res => res.json()) .then(data => setResults(data)) return () => controller.abort() }, [query]) Now only the latest request updates the UI. --- 💡 Good React engineers don’t just reduce API calls. They ensure correct data is shown. #reactjs #frontend #javascript #webdevelopment

⚛️ Most React codebases don’t fail because of bad logic. They fail because of bad structure. Over time, components grow. State spreads everywhere. And the codebase becomes harder and harder to maintain. Here are 8 React best practices I apply on every project: 1️⃣ One component = one responsibility If a component fetches data, manages logic, and renders UI… …it’s doing too much. Split it. 2️⃣ Use custom hooks for business logic Logic belongs in hooks. Components should stay focused on rendering. Examples: "useAuth()" "useFetchOrders()" "useDebounce()" 3️⃣ Structure your project by feature Instead of a giant "/components" folder… Use feature-based architecture. Each feature owns its: • components • hooks • services • tests 4️⃣ Keep state local first Not everything needs Redux or Zustand. "useState" and "useContext" solve most cases. Global state should be the exception. 5️⃣ Memoize with intention "useMemo" and "useCallback" are not magic. Use them when you measure a real performance issue. Not “just in case”. 6️⃣ TypeScript is non-negotiable Props without types = bugs waiting to happen. Interfaces, generics, and strict mode prevent hours of debugging. 7️⃣ Prefer early returns over nested ternaries Readability wins. If your JSX has multiple ternary levels, refactor it. 8️⃣ Tests are part of the product • Unit tests for hooks • Integration tests for flows • Cypress / Playwright for critical paths Shipping without tests is shipping with hope. Hope is not a strategy. These practices aren’t “nice to have”. They’re what separate a React developer from a React engineer. 💬 What’s the React best practice your team never compromises on? #React #Frontend #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering