Why is my API call running again and again?

🪝 Understanding Custom Hooks in React — Story Time A few days ago, during a lively code review, I found myself in the hot seat: “Hey Abdul, what exactly are custom hooks in React?” someone asked. I smiled and replied, “It’s a function that uses React hooks inside it.” Everyone nodded… but I could sense a few puzzled faces. On my way home, that moment stuck with me. I realized — custom hooks aren’t just a ‘function with hooks.’ They’re a game changer for cleaner, reusable React code. Here’s what I’ve learned: - Custom hooks let you share logic (like fetching data or listening to events) without copy-pasting code everywhere - Your UI components stay focused on rendering, not managing logic - One change in the hook = instant improvement across your app Now, I always ask: If I’m repeating state logic in multiple places, should this be a custom hook? It keeps our team’s code DRY, tidy, and easier to maintain! ✅ Tried-and-true uses: fetching API data, form input handling, authentication state ❌ Skip hooks for one-off logic—simplicity always wins I unpack more stories, examples, and tips in my latest Medium post. 👉 https://lnkd.in/gn_ntBJt #React #FrontendDevelopment #WebDevelopment #JavaScript #ReactJS #CustomHooks #CleanCode #DeveloperCommunity #TechTips

Building Custom Hooks for Cleaner Code in React When React apps start growing, managing logic across multiple components can get messy. That’s where Custom Hooks come in — your secret weapon for writing cleaner, reusable, and more maintainable code. 🔹 What are Custom Hooks? Custom Hooks are simply JavaScript functions that use React hooks (like useState, useEffect, etc.) to share logic between components — without duplicating code. 🔹 Why Use Them? Promotes reusability of logic. Keeps components clean & focused on UI. Improves readability and maintainability 🔹 Example: useFetch Hook import { useState, useEffect } from "react"; function useFetch(url) {   const [data, setData] = useState(null);   const [loading, setLoading] = useState(true);   useEffect(() => {     fetch(url)       .then((res) => res.json())       .then((data) => {         setData(data);         setLoading(false);       });   }, [url]);   return { data, loading }; } Now, any component can easily use this logic: const { data, loading } = useFetch("https://lnkd.in/gVChxg-b"); Custom Hooks help you write DRY (Don’t Repeat Yourself) code and keep your components focused on rendering — not logic. #ReactJS #WebDevelopment #JavaScript #CleanCode #ReactHooks #FrontendDevelopment

𝗛𝗼𝘄 𝗜 𝗦𝘁𝗼𝗽𝗽𝗲𝗱 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽 𝗳𝗿𝗼𝗺 𝗦𝗹𝗼𝘄𝗶𝗻𝗴 𝗗𝗼𝘄𝗻 A few months ago, one of my React components started lagging. Every click triggered re-renders — and the UI felt painfully sluggish. I assumed it was my API or data fetching... but nope. The real issue? My component was recalculating the same logic on every render. That’s when I discovered the magic of 𝘂𝘀𝗲𝗠𝗲𝗺𝗼() and honestly, it felt like flipping a performance switch. 𝗤𝘂𝗶𝗰𝗸 𝗦𝘆𝗻𝘁𝗮𝘅: const memo = useMemo(() => expensiveCalculation(a, b), [a, b]); 𝗪𝗵𝗮𝘁 𝗜 𝗟𝗲𝗮𝗿𝗻𝗲𝗱: 𝘂𝘀𝗲𝗠𝗲𝗺𝗼() basically tells React: “Hey, remember this calculation unless something changes.” That one line helped my app skip unnecessary work and become noticeably smoother. 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀: Perfect for heavy computations — sorting, filtering, mapping large data Helps avoid unnecessary re-renders. But don’t overuse it — optimization ≠ default 𝗙𝗶𝗻𝗮𝗹 𝗧𝗵𝗼𝘂𝗴𝗵𝘁: 𝘂𝘀𝗲𝗠𝗲𝗺𝗼() won’t magically speed up your app but it will keep it from getting slower. Use it smartly, not everywhere. Have you used 𝘂𝘀𝗲𝗠𝗲𝗺𝗼() in your projects? What kind of performance gains did you notice? Drop your thoughts below! #ReactJS #FrontendDevelopement #WebDevelopment #JavaScript #useMemo #ReactHooks #PerformanceTips #ReactCommunity #LearnReact #ReactTips #ReactPerformance #WebOptimization #ReactDevelopers

🔄 Context API vs. Redux Toolkit: What I learned after really building with both. I built a simple React app with two features: A theme toggle 🌗 A counter 🔢 I wired the theme switch with Context API and the counter with Redux Toolkit. Here’s the practical difference I found. 👇 ⚔️ Context API vs. Redux Toolkit Here's the quick-glance comparison based on my test: 🧩 React Context API 🎯 Purpose: Best for sharing simple, global data that doesn't change often. ⚙️ Performance: Re-renders all consuming components when the context value changes. 🧠 Async Logic: You have to handle it manually (e.g., useEffect + useState). 🧰 DevTools: None built-in. ✅ Best for: Theme, language, or simple auth status. 🚀 Redux Toolkit (RTK) 🎯 Purpose: Built to manage complex, scalable, app-wide state. ⚙️ Performance: Highly optimized. Components only re-render if the specific piece of state they're subscribed to changes. 🧠 Async Logic: Built-in! createAsyncThunk is a clean, first-class citizen. 🧰 DevTools: The best. Time-travel debugging is a lifesaver. ✅ Best for: Shopping carts, dashboards, complex forms, or any state shared by many components. 💡 My Takeaway Context is not a "bad" Redux. It's a different tool for a different job. It's perfect for that light, "global prop" state. But as soon as your app grows, you feel the pain. If you start passing complex logic or frequent updates through Context, it becomes much harder to maintain and debug. Redux Toolkit is built from the ground up to keep that complexity clean, predictable, and scalable. 🔥 🧠 TL;DR Theme Toggle 🌗 → Context API ✅ Complex Counter 🔢 → Redux Toolkit ✅ 💬 What's your go-to for state management? Do you stick with Context, go for Redux, or has something else (like Zustand) won you over? #React #Redux #ContextAPI #JavaScript #WebDevelopment #Frontend #ReactJS #LearningInPublic #DevJourney #StateManagement #Developer

React useEffect: The Most Overused Hook in the Entire React Ecosystem  🔄 useEffect is one of the most powerful hooks in React — but it’s also one of the most misunderstood. Many developers use it more than necessary simply because it feels like the “go-to” solution for almost everything. Here’s a clear rule that simplifies everything 👇 ⚠️ If your logic doesn’t depend on a SIDE EFFECT… you don’t need useEffect. And yes — removing unnecessary effects can instantly boost performance. ❌ The common mistake: Using useEffect for things like: • Setting state from props • Filtering data • Simple calculations • UI logic that could run inside the component All of these cause extra re-renders, slow down the app, and create bugs. ✅ When useEffect is ACTUALLY NEEDED: Use it ONLY for real side effects: ✔️ Fetching data (API calls) ✔️ Subscribing to events ✔️ Setting up listeners ✔️ Syncing with external systems ✔️ Handling timers/timeouts If it doesn’t fall into these categories…👉 Remove the effect. Your component becomes faster and cleaner. 🎯 Pro Tip: Before writing any useEffect, ask yourself: “Will this code run fine without useEffect?” If the answer is YES — don’t use it. #ReactJS #Frontend #WebDevelopment #JavaScript #ReactHooks #CleanCode #PerformanceOptimization

Treating React state like a regular variable is dangerous. It’s the fastest way to create bugs that make you lose your mind. If your new React state depends on the current state, you have to use the functional form. Everybody knows this… until they don’t. Take the classic toy example: setCount(count + 1) setCount(count + 1) Of course this is a stupid example. Nobody writes code that obviously wrong in real life. But it’s perfect for explaining the core idea: both calls read the same stale count, React batches them, and you don’t get the result you expect. In reality, the mistake hides inside much bigger code. A couple of effects. An event handler or two. Some async calls. A hook that depends on another hook. And suddenly you’re updating state “based on the current state” without even realizing it. That’s when things get tricky: unexpected toggles, missed increments, UI that feels “off by one,” or some weird race condition that only happens when your user clicks fast. The rule stays simple: If the new state is calculated from the old state, use the functional form. Always. setCount(prev => prev + 1) That’s how you avoid all the subtle bugs that only show up when your app gets reactive, event-driven, and real. React state isn’t a variable you overwrite. It’s a timeline of transitions. Once you treat it that way, the weird stuff stops happening. Been there? Tell me. Curious to hear your worst React state surprises. #ReactJS #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #ReactHooks

⚛️ That moment when I realized useEffect() was watching everything I did 👀 When I first learned React, I used useState() like a pro... but then I needed to fetch data from an API. So naturally, I wrote it right inside my component: function App() { fetch("/api/data").then(...); return <h1>Hello</h1>; } And then React said: “Sure, let me fetch that again... and again... and again!” 😭 My console was spamming network requests like a DJ mixing beats. 🎧 That’s when I discovered useEffect() — the hook that runs side effects the right way. ✅ The correct way: useEffect(() => { fetch("/api/data").then(...); }, []); // runs only once 💡 Lesson learned: useEffect() lets you run side effects like fetching data, updating the DOM, or setting timers. The dependency array ([]) controls when it runs. Empty [] → runs once. Add variables → runs when they change. Now my app fetches data once, not forever. 🙌 React hooks aren’t just syntax — they’re patterns that teach us when and why things happen. 💭 #ReactJS #useEffect #ReactHooks #WebDevelopment #MERNStack #FrontendDeveloper #LearningByDoing #JavaScript #CodingJourney #ReactTips

⚛️ React Tip of the Day — Stop Over-Rendering Your Components! One of the silent killers of frontend performance is unnecessary re-renders. Most React apps don’t lag because React is slow — they lag because we re-render things that don't need to rerender. Here’s what I actively use in real projects 👇 ✅ 1. Prevent Re-renders with React.memo When a component receives the same props, don’t re-render it. const ProductCard = React.memo(({ data }) => { return <div>{data.name}</div>; }); ✅ 2. Stable Functions = useCallback Functions are new on every render → child components re-render. const handleClick = useCallback(() => { setCount(c => c + 1); }, []); ✅ 3. Avoid Storing Derived Values in State If a value can be computed, don’t store it in state. // ❌ do not const [filtered, setFiltered] = useState(items.filter(x => x.active)); // ✅ compute when needed const filtered = useMemo(() => items.filter(x => x.active), [items]); ✅ 4. Lazy Load Heavy Components Boost load speed by loading components only when needed. const Dashboard = React.lazy(() => import('./Dashboard')); 🚀 Real Results in Production After applying these in real enterprise apps: ✔ Faster UI updates ✔ Better Lighthouse performance ✔ Smoother user experience ✔ Reduced CPU usage & bundle size Frontend isn’t just about UI — it's about shipping fast + smooth experiences. #React #FrontendDeveloper #NextJS #WebDevelopment #CareerGrowth #BuildInPublic #LearningJourney #JavaScript #TechCommunity #2025Goals

A Simple Guide to React’s 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 Hook --> 𝐄𝐯𝐞𝐫 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 𝐰𝐡𝐚𝐭 exactly 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 does and why it’s so important? 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭? useEffect is a React Hook that lets you perform side effects in functional components — like fetching data, updating the DOM, or setting up event listeners. In simple words: it tells React to “𝐝𝐨 𝐬𝐨𝐦𝐞𝐭𝐡𝐢𝐧𝐠 𝐚𝐟𝐭𝐞𝐫 𝐫𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠.” 𝐖𝐡𝐲 𝐝𝐨 𝐰𝐞 𝐮𝐬𝐞 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭? Because not everything in React is about 𝐫𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠 𝐭𝐡𝐞 𝐔𝐈. Sometimes, your app needs to interact with the outside world — 𝐀𝐏𝐈𝐬, 𝐬𝐭𝐨𝐫𝐚𝐠𝐞, 𝐨𝐫 𝐞𝐯𝐞𝐧 𝐛𝐫𝐨𝐰𝐬𝐞𝐫 𝐞𝐯𝐞𝐧𝐭𝐬. useEffect helps you run that code after the component renders, without breaking the React flow. 𝐓𝐡𝐞 𝐏𝐨𝐰𝐞𝐫 𝐨𝐟 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭? It gives you full control over 𝐰𝐡𝐞𝐧 𝐚𝐧𝐝 𝐡𝐨𝐰 𝐨𝐟𝐭𝐞𝐧 𝐲𝐨𝐮𝐫 𝐞𝐟𝐟𝐞𝐜𝐭 𝐫𝐮𝐧𝐬. With the dependency array, you can decide: [ ] → run once [data] → run when data changes (no array) → run on every render Clean, predictable, and no infinite loops Follow [Akash Tolanur] for more such react contents #React #ReactJS #javaScript #frontend #WebDevelopment #ReactHooks

⚛️ Hooks & Advanced State Management in React Today’s revision took me beyond useState — into how React actually handles complex data flows. Understanding how hooks manage logic, memory, and UI updates feels like unlocking React’s real power. Here’s what I explored 👇 🔹 Functions – Write clean, reusable logic. 🔹 Hooks – Make components reactive & data-driven. 🔹 Advanced State Management – Go beyond useState for complex apps. 💡 When to move beyond useState: Use useReducer when your component has multiple, related state updates. Use Context API for data that needs to be shared across components. Use Zustand when you want lightweight, global state management without Redux complexity. Example with Zustand: import { create } from 'zustand' const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) })) Clean, minimal, and surprisingly powerful ⚡ The deeper I go, the more I realize — React isn’t just about UI. It’s about managing change efficiently. #ReactJS #Zustand #StateManagement #FrontendDevelopment #WebDevelopment #JavaScript #BuildingInPublic #100DaysOfCode #CodingJourney