Optimize React API Calls with React Query or SWR

🎥 Project Overview: In this video, I’ve demonstrated the core flow of the application, from user onboarding to real-time interactions. 🛠 Key Features: User Authentication: Secure Sign-up and Login system with personalized onboarding. Dynamic Feed: Users can create posts with images and captions, which appear instantly on the home feed. Real-time Messaging: Integrated a chat system where users can communicate instantly. Interactive UI: Like posts, follow/unfollow users, and explore a dedicated "Explore" page. Profile Management: Fully editable profiles, including bio updates and profile picture changes with real-time status notifications. Responsive Design: A clean, modern UI inspired by Instagram's latest layout. 💻 Tech Stack: Frontend: React.js, Tailwind CSS (for that sleek UI). Backend: Node.js & Express.js. Database: MongoDB. Real-time: Socket.io (for instant messaging). 🔗 GitHub Repository: https://lnkd.in/dZXdgq5d I’m always looking to learn and improve. I'd love to hear your feedback or suggestions on the UI/UX and the overall architecture! #WebDevelopment #MERNStack #ReactJS #FullStackDeveloper #PortfolioProject #InstagramClone #Coding #JavaScript #OpenSource#FullStackDeveloper#WebDevelopment#SoftwareEngineer#FrontendDeveloper#BackendDeveloper#MERNStack#ReactJS#NodeJS#MongoDB#ExpressJS#JavaScript#BuildingInPublic#OpenSource#CodingCommunity#InstagramClone#PortfolioProject

🚫 Can We Cancel a Promise in JavaScript? 🎯 Imagine this: An API call is triggered… The user clicks “Cancel” or navigates away… 👉 But the request is still running in the background. Why? Because Promises in JavaScript cannot be cancelled once they start. ⚠️ The Reality A Promise is like a train 🚆 Once it leaves the station, it cannot be stopped midway. ✅ So What Can We Do? Even though we can’t cancel the Promise itself, we can control its behavior 👇 🔹 1. AbortController (Modern Approach) Cancel network requests like fetch: const controller = new AbortController(); fetch('/api/data', { signal: controller.signal }); controller.abort(); // stops the request 🔹 2. Manual Flags (Control Execution) let isCancelled = false; setTimeout(() => { if (!isCancelled) { console.log("Executed"); } }, 2000); isCancelled = true; 🔹 3. (Angular Devs 👀) Use RxJS switchMap() 👉 Automatically cancels previous API calls and keeps only the latest 💡 Key Insight ❌ You can’t cancel a Promise ✅ But you CAN cancel its effect 🚀 Why This Matters This pattern is critical for: API calls Search inputs Rapid user interactions Preventing stale data issues 💬 Let’s Discuss How do you handle cancellation in your apps? 👉 AbortController, RxJS, or custom logic? #JavaScript #Angular #RxJS #AsyncProgramming #Promises #AbortController #FrontendDevelopment #CodingTips #WebDevelopment #TechInterviews

Most developers just dump everything into one folder. Here's the folder structure I follow in every React/Next.js project — and why it matters. After 13+ years in frontend, I've seen messy codebases slow down entire teams. A clean structure saves hours of debugging and makes onboarding 10x easier. Here's what each folder does: 📁 api — All backend connections in one place. No API calls scattered across components. 📁 assets — Static files only. Images, fonts, icons — nothing else. 📁 components — Reusable UI pieces. If you're copy-pasting a component, it belongs here. 📁 context — Global state without Redux overhead. Perfect for auth, theme, language. 📁 data — Shared static data, constants, mock data. 📁 hooks — Custom logic lives here. Keep your components clean and dumb. 📁 pages — One file per route. Simple, predictable, easy to navigate. 📁 services — Business logic and API call functions. Never write fetch() inside a component. 📁 utils — Helper functions. Date formatting, validators, converters. My 3 golden rules: → If it's reusable — it's a component → If it's logic — it's a hook or service → If it's repeated — it's a utility A clean project structure is not a luxury. It's professionalism. Save this post for your next project. 🔖 What does your folder structure look like? Drop it in the comments 👇 #ReactJS #NextJS #Frontend #WebDevelopment #JavaScript #CSS #HTML #FolderStructure #CleanCode #SoftwareEngineering #FrontendDeveloper #UIDeveloper #WebDev #100DaysOfCode #LearningInPublic #Programming #CodeQuality #React #TechTips #SeniorDeveloper

🚀 Understanding Functional vs Class Components in React — Simplified! In React, everything revolves around components. But there are two types: 👉 Functional Components 👉 Class Components So… which one should you use? 💡 What are Functional Components? 👉 Simple JavaScript functions that return JSX function Greeting() { return <h1>Hello, React!</h1>; } ✅ Cleaner syntax ✅ Easier to read ✅ Uses Hooks (useState, useEffect) ✅ Preferred in modern React 💡 What are Class Components? 👉 ES6 classes that extend React.Component class Greeting extends React.Component { render() { return <h1>Hello, React!</h1>; } } 👉 Uses lifecycle methods instead of hooks ⚙️ Key Differences 🔹 Functional: Uses Hooks Less boilerplate Easier to maintain 🔹 Class: Uses lifecycle methods More complex syntax Harder to manage state 🧠 Real-world use cases ✔ Functional Components: Modern applications Scalable projects Cleaner architecture ✔ Class Components: Legacy codebases Older React apps 🔥 Best Practices (Most developers miss this!) ✅ Prefer functional components in new projects ✅ Use hooks instead of lifecycle methods ✅ Keep components small and reusable ❌ Don’t mix class and functional patterns unnecessarily ⚠️ Common Mistake 👉 Overcomplicating simple components with classes // ❌ Overkill class Button extends React.Component { render() { return <button>Click</button>; } } 👉 Use functional instead 💬 Pro Insight React today is built around: 👉 Functions + Hooks, not classes 📌 Save this post & follow for more deep frontend insights! 📅 Day 7/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧 🤔 Many developers use useState and useRef… but don’t know the real difference. Question: What is the difference between useState and useRef? And which one causes re-render? Example 👇 import React, { useState, useRef } from "react"; export default function App() { const [count, setCount] = useState(0); const refCount = useRef(0); console.log("Render"); return ( <> <button onClick={() => setCount(count + 1)}> useState + <button onClick={() => { refCount.current += 1; console.log(refCount.current); }}> useRef + </button> </> ); } What happens here? Click useState button → Component re-renders Click useRef button → Component does NOT re-render Why? useState → updates state and re-renders component useRef → updates value without re-render Tip for Interview: useRef is used for storing mutable values without causing re-render. Good developers know hooks. Great developers know when to use them. #ReactJS #ReactHooks #useState #useRef #FrontendDeveloper #JavaScript #ReactInterview #CodingInterview #WebDevelopment

🚀 React.js! Getting more comfortable with React now! Today I explored one of the most important hooks — useEffect. 💡 What I learned today: • useEffect for handling side effects • Fetching data from APIs • Component lifecycle basics in React • Clean and efficient code structure 👨💻 Tried a simple example: import React, { useState, useEffect } from "react"; function Users() { const [users, setUsers] = useState([]); useEffect(() => { fetch("https://lnkd.in/g7MrTyES") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); return ( <div> <h2>User List</h2> {users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> ); } export default Users; This helped me understand how React handles data fetching and updates the UI dynamically ⚡ Slowly building confidence and consistency 💪 If you have any tips, resources, or beginner project ideas, feel free to share 🙌 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Programming #Developer #SoftwareDeveloper #LearningJourney #Day3 #100DaysOfCode #CodeNewbie #Tech #UI #WebDev #ReactHooks #useEffect #APIs #Frontend #CodingLife #Developers #TechCommunity #LearnInPublic

Day 21: useMemo vs useCallback (Most Confusing React Topic) Many React developers get confused between useMemo and useCallback. But the difference is actually simple 📌 What is useMemo? useMemo is used to memoize a computed value. 👉 It prevents expensive calculations from running again and again. import { useMemo, useState } from "react"; function App() { const [count, setCount] = useState(0); const expensiveValue = useMemo(() => { console.log("Calculating..."); return count * 10; }, [count]); return ( <div> <h1>{expensiveValue}</h1> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); } ✅ It stores the result/value. 📌 What is useCallback? useCallback is used to memoize a function. 👉 It prevents a function from being recreated on every render. import { useCallback, useState } from "react"; function App() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log("Clicked"); }, []); return ( <div> <button onClick={handleClick}>Click</button> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); } ✅ It stores the function reference. 🔥 Simple Difference ✅ useMemo → returns a VALUE ✅ useCallback → returns a FUNCTION 📌 When to use them? useMemo ✔ Heavy calculations ✔ Derived data useCallback ✔ Passing functions as props ✔ React.memo optimized components 🎯 Interview Line 👉 useMemo memoizes values, useCallback memoizes functions. #ReactJS #useMemo #useCallback #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

React Re-rendering Is NOT What You Think… When I started React, I thought: “State changes → Component re-renders → Done” Simple… right? But I was completely WRONG Truth: React doesn’t just re-render that one variable It re-renders the ENTIRE component Example: const [count, setCount] = useState(0); console.log("Component Rendered"); Every click → Whole component runs again All functions re-created All calculations re-execute The Mistake I Made: I was doing heavy work inside components like: const filteredData = data.filter(...) So every render → Expensive calculations again Performance drop The Fix (Game Changer): useMemo() const filteredData = useMemo(() => { return data.filter(...) }, [data]); -----Now it only runs when needed Another Hidden Issue: Functions inside components const handleClick = () => {} Re-created on EVERY render Fix? useCallback() Golden Rule: If something is: Expensive → useMemo Function passed to child → useCallback My Learning: React is not about writing code It’s about controlling re-renders What about you? Did you know your whole component re-renders every time? Devendra Dhote Daneshwar Verma Ritik Rajput #reactjs #javascript #webdevelopment #frontend #performance #coding #reactdeveloper #learninpublic

useEffect is the most abused hook in React. Here's what to use instead. I've reviewed hundreds of React codebases. useEffect is in the wrong place in about 60% of them. Not because developers are careless. Because nobody explained when NOT to use it. Here are the cases I see constantly — and what actually belongs there: // ❌ Case 1: Deriving state useEffect(() => { setFullName(`${firstName} ${lastName}`) }, [firstName, lastName]) // ✅ Just compute it const fullName = `${firstName} ${lastName}` No state. No effect. No re-render bug. // ❌ Case 2: Fetching data on mount (with App Router) useEffect(() => { fetch('/api/user').then(...) }, []) // ✅ Use a Server Component or TanStack Query // Data fetching is not a side effect in modern React // ❌ Case 3: Syncing two pieces of state useEffect(() => { if (selectedId) setDetails(getDetails(selectedId)) }, [selectedId]) // ✅ Derive during render const details = selectedId ? getDetails(selectedId) : null The React team has said explicitly: if you're using useEffect to sync state with other state, you probably have one piece of state too many. useEffect is for: → Connecting to external systems (WebSocket, third-party libraries, browser APIs) → Setting up subscriptions → Manual DOM manipulation That's mostly it. If you're using useEffect for anything that feels like when X changes, update Y, there's almost certainly a cleaner way. What's the strangest useEffect usage you've come across? #React #JavaScript #TypeScript #FrontendDevelopment #WebDevelopment