Use useQuery Instead of useEffect for React API Calls

⚡ Stop Killing Performance — 3 Ways to Reduce React Rerenders React is fast. Bad code isn't. 1. React.memo for expensive components const ExpensiveComponent = React.memo(({ data }) => { // Only rerenders when data changes }); 2. useCallback for functions passed as props const handleClick = useCallback(() => { doSomething(id); }, [id]); // New function only when id changes 3. useMemo for expensive calculations const sortedData = useMemo(() => { return data.sort((a, b) => a.value - b.value); }, [data]); // Only recalculates when data changes The Impact: Cut rerenders by 60% on a recent dashboard. User interactions went from laggy to instant. What's your React performance tip? #ReactJS #WebPerformance #FrontendDeveloper #JavaScript #CodingTips

🚀 Mastering APIs in React JS: Fetching Data & Fixing Bugs Like a Pro Working with APIs is one of the most important skills in React development. Whether you're building a dashboard, e-commerce site, or social app — fetching and managing data is at the core. 🔹 How to Fetch Data in React JS The most common way is using fetch() or libraries like axios. Example using fetch: import { useEffect, useState } from "react"; function App() { const [data, setData] = useState([]); useEffect(() => { fetch("https://lnkd.in/dKnZgEeR") .then((response) => response.json()) .then((data) => setData(data)) .catch((error) => console.error("Error:", error)); }, []); return ( <div> {data.map((item) => ( <p key={item.id}>{item.name}</p> ))} </div> ); } 🔹 Common API Bugs & How to Fix Them ✅ 1. CORS Errors Cause: Server blocking your request Fix: Use backend proxy or enable CORS on server ✅ 2. Infinite Re-renders Cause: Missing dependency array in useEffect Fix: Always use [] or proper dependencies ✅ 3. Undefined Data Errors Cause: Data not loaded yet Fix: Add conditional rendering (data && ...) ✅ 4. Incorrect API Response Handling Cause: Wrong data structure assumptions Fix: Always console.log() response first 🔹 Pro Tips 💡 Use async/await for cleaner code 💡 Handle loading & error states 💡 Use tools like Postman to test APIs 💡 Consider using React Query or SWR for better data fetching 🔥 APIs are the bridge between your frontend and real-world data. Master them, and your React skills instantly level up. #ReactJS #WebDevelopment #Frontend #JavaScript #API #Coding #Developers #TechTips

🚀 Why You Should Use React Query (TanStack Query) in Your Next Project If you're still managing server state manually with useEffect + useState… you're making life harder than it needs to be. Here’s why React Query is a game-changer 👇 🔹 1. Smart Data Fetching React Query handles caching, background updates, and synchronization automatically — no need to write repetitive API logic. 🔹 2. Built-in Caching Data is cached by default, which means faster UI and fewer unnecessary API calls. 🔹 3. Automatic Refetching It can refetch data in the background when the window refocuses or network reconnects. 🔹 4. Easy Loading & Error States No more manual flags — React Query gives you clean states like isLoading, isError, isSuccess out of the box. 🔹 5. Pagination & Infinite Scroll Handling pagination becomes super simple with built-in support. 🔹 6. Better Developer Experience Cleaner code, less boilerplate, and improved maintainability. 💡 In short: React Query lets you focus on building features instead of managing server state. Have you tried React Query yet? Share your experience 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #Programming #Developers #Tech

🚀 Understanding Forms in React — Simplified! Forms are a core part of almost every application. 👉 Login forms 👉 Signup forms 👉 Search inputs But handling them correctly in React is crucial. 💡 What are Forms in React? Forms allow users to input and submit data. In React, form handling is typically done using: 👉 Controlled Components 👉 State management ⚙️ Basic Example (Controlled Form) function Form() { const [name, setName] = useState(""); const handleSubmit = (e) => { e.preventDefault(); console.log(name); }; return ( <form onSubmit={handleSubmit}> <input value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit">Submit</button> </form> ); } 🧠 How it works 1️⃣ Input value is stored in state 2️⃣ onChange updates state 3️⃣ onSubmit handles form submission 👉 React becomes the single source of truth 🧩 Real-world use cases ✔ Login / Signup forms ✔ Search bars ✔ Feedback forms ✔ Multi-step forms 🔥 Best Practices (Most developers miss this!) ✅ Always prevent default form reload ✅ Keep form state minimal ✅ Use controlled components for better control ❌ Don’t mix controlled & uncontrolled inputs ❌ Don’t store unnecessary form state ⚠️ Common Mistake // ❌ Missing preventDefault <form onSubmit={handleSubmit}> 👉 Causes full page reload 💬 Pro Insight Forms in React are not just inputs— 👉 They are about managing user data efficiently 📌 Save this post & follow for more deep frontend insights! 📅 Day 12/100 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #Forms #SoftwareEngineering #100DaysOfCode 🚀

What happens when a user sends a request to your NestJS application and it takes too long to respond, causing the client to timeout and retry the request multiple times. This can lead to a flood of duplicate requests hitting your server, which can be catastrophic for performance and data consistency. To mitigate this, you can use a technique called idempotence, where you design your API endpoints to produce the same result no matter how many times they are called with the same input. ```javascript // Example of idempotent controller in NestJS import { Controller, Post, Body } from '@nestjs/common'; @Controller('payments') export class PaymentsController { @Post() makePayment(@Body() paymentData: any) { // Idempotent operation const paymentId = paymentData.paymentId; // Check if payment is already processed if (this.isPaymentProcessed(paymentId)) { return { message: 'Payment already processed' }; } // Process payment this.processPayment(paymentId); return { message: 'Payment successful' }; } } ``` By making your API endpoints idempotent, you can prevent duplicate requests from causing issues with your application. What strategies do you use to handle duplicate requests in your applications? 💬 Have questions or working on something similar? DM me — happy to help. #NestJS #NodeJS #Idempotence #APIDesign #BackendDevelopment #SoftwareEngineering #PerformanceOptimization #DuplicatesRequestHandling #APIEndpoints

🚀Why Loading Too Much Data Can Break Your Application While working on an infinite scrolling feature in React, I came across an important real-world problem 👇 ❌ Problem: If the backend sends a very large amount of data at once, both the website and server start slowing down. 🔍 Why does this happen? ▪️ Large API responses take more time to transfer over the network. ▪️The browser struggles to render too many items at once. ▪️Memory usage increases significantly. ▪️Server load increases when handling heavy requests. 👉 I was using the GitHub API, and it helped me understand how important it is to control the amount of data being fetched. 📦 Solution: Pagination + Infinite Scrolling ▪️Instead of loading everything at once: ▪️Fetch data in smaller chunks (pagination) ▪️Load more data only when needed (infinite scroll). ⚡ Benefits: ▪️Faster initial load time ▪️Better performance ▪️Smooth user experience ▪️Reduced server stress 💡 What I learned: ▪️Efficient data fetching is crucial in frontend development ▪️Performance optimization matters as much as functionality ▪️Real-world applications are built with scalability in mind 🎯 Key takeaway: It’s not about how much data you can load — it’s about how efficiently you load it. #ReactJS #JavaScript #WebDevelopment #Frontend #Performance #LearningInPublic #CodingJourney

⚡ 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

useState is not for everything. Most React developers make this mistake without even realizing it. They use useState for everything that needs to "store" data. And then wonder why their app re-renders so much. This is Post 9 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what actually happens under the hood: 🔵 useState → triggers re-render every time it changes. React watches it. UI updates. But every update = a full render cycle. 🟢 useRef → stores data silently Value persists. But React has no idea it changed. No re-render. 🔴 let variable → resets every single render No persistence. No re-render. Just... gone. Same goal. Very different behaviors. A real-world mistake I see all the time: // ❌ Wrong const [timerId, setTimerId] = useState(null) // ✅ Right const timerRef = useRef(null) Storing a timer ID in state? That causes an unnecessary re-render for data your UI doesn't even show. The simple rule I follow now: 🧠 If it affects the UI → useState 🤫If it's silent data → useRef ⚡ If it's temporary → let variable Wrong choice = silent bugs. Right choice = cleaner, faster React. Next post: useMemo, useCallback, and when React.memo actually helps. Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: Side effects of useEffects: https://lnkd.in/dGGw65aV #React #ReactJS #Frontend #WebDevelopment #JavaScript #BuildInPublic #LearnInPublic #ReactUnderTheHood #FrontendDevelopment #WebDev

Stop treating Inertia.js like a standard SPA. It’s killing your scalability. 🔄 After 10 years in the Laravel and Vue.js ecosystem, I’ve realized that the "magic" of Inertia is where most architectural debt actually begins. It’s incredibly easy to get started, but when you scale to thousands of simultaneous users, your middleware choices matter more than your framework features. The most common architectural failure I see? Treating the HandleInertiaRequests middleware like a global dumping ground for shared data. The "Senior" approach requires looking deeper into the stack: Shared Data Bottlenecks: If you aren't aggressively using Lazy Props (Inertia::lazy) for heavy datasets or user-specific context, you are adding unnecessary overhead to every single request. You’re effectively DDoS-ing your own API with every page visit. State Management: Real optimization is knowing exactly when a heavy computation belongs in a Laravel Resource (server-side) vs. a Vue computed property (client-side) to keep the browser's main thread free for interaction. The "Silent" Failures: It’s about utilizing Partial Reloads properly and implementing Manual Visit Cancellations to prevent UI race conditions when users click faster than your server can respond. I’ve found that building for the "happy path" is easy. Building for the "scale path" is where the real engineering happens. Fellow Laravel/Vue devs: How are you handling massive shared data payloads in Inertia? Are you a fan of Lazy Props, or do you prefer keeping the middleware lean and using XHR for the heavy lifting? 👇 #Laravel #VueJS #InertiaJS #FullStackArchitecture #WebPerformance #SoftwareEngineering #PHP #WebDev

🔥 Stop Making Repeated API Calls in React! (Use Smart Caching) As a Frontend Developer, one of the most common performance issues I’ve seen is: 👉 Same API getting called again and again This not only slows down the app ⏳ but also increases server load 📉 💡 The solution? Client-Side Caching using TanStack Query (React Query) --- ✅ What is TanStack Query? It’s a powerful data-fetching library that automatically: ✔️ Caches API responses ✔️ Prevents duplicate API calls ✔️ Refetches data in background ✔️ Manages loading & error states --- 💻 Example: Avoid Redundant API Calls import { useQuery } from "@tanstack/react-query"; const fetchUsers = async () => { const res = await fetch("/api/users"); return res.json(); }; export default function Users() { const { data, isLoading } = useQuery({ queryKey: ["users"], // unique cache key queryFn: fetchUsers, staleTime: 5 * 60 * 1000, // cache valid for 5 mins }); if (isLoading) return <p>Loading...</p>; return <div>{data.length} users</div>; } --- 🧠 How it works? - First API call → data stored in cache - Next time → data served from cache (no API call) 🚀 - After "staleTime" → background refetch happens --- ⚡ Why I prefer this in production? 👉 No need to manually manage cache 👉 Built-in request deduplication 👉 Improves performance drastically 👉 Cleaner & scalable code --- 🎯 Pro Tip (Senior Level) Use proper "queryKey" + cache invalidation strategy for dynamic apps --- 💬 Have you used React Query or still managing API calls manually? Let’s discuss 👇 #ReactJS #Frontend #Performance #WebDevelopment #JavaScript #ReactQuery #TanStackQuery #SoftwareEngineering