Missing dependency array in useEffect caused infinite API calls.

Ever feel like you're fighting an invisible monster causing infinite re-renders in React? I lost a solid hour to one yesterday. My component was simple: a `useEffect` fetching data. But it was firing non-stop. 😩 I checked the dependency array, and it *looked* fine. The culprit? I was passing an object directly: `useEffect(fetchData, [myConfigObject])`. On every render, a 𝐧𝐞𝐰 `myConfigObject` instance was created, even with the same values. React saw a different object reference and re-ran the effect, triggering another render. A vicious cycle! 🔄 The React DevTools Profiler finally helped me see the light. 💡 Remember: for non-primitive dependencies in `useEffect`, either destructure them into primitives or memoize them with `useMemo`. Have you struggled with this before? #ReactJS #FrontendDevelopment #DeveloperTips

🚀 How I solved a real-world API problem in my React project Recently, while building my React-based news app, I ran into an interesting problem that turned into a great learning experience. Initially, I deployed the project using GitHub Pages and integrated the NewsAPI to fetch live headlines. Everything worked perfectly on localhost — until I deployed it. Once live, every API call started failing with mysterious CORS and 426 errors. After some debugging, I realized: 👉 NewsAPI (on the free plan) doesn’t allow direct browser calls from deployed origins like GitHub Pages. That’s when I learned an important concept — “Static hosting + Direct API calls = CORS issues.” 🧠 My solution: Instead of calling the NewsAPI directly from the React frontend, I deployed a serverless function on Vercel that securely calls the API on the backend and sends the data to my frontend. Basically, I turned Vercel into a lightweight API proxy: It keeps my API key safe 🔐 It bypasses CORS restrictions 🌐 It allows GitHub Pages (static) and my backend (Vercel) to work seamlessly together 💡 ⚙️ Stack: Frontend: React + GitHub Pages Backend: Vercel Serverless Functions API: NewsAPI Other tools: Infinite Scroll, React Router, and a custom loading bar component 💡 If you’re a React developer deploying with GitHub Pages and your API suddenly stops working — check if your backend allows browser calls! Would love to hear — have you ever faced a similar issue while deploying your project? #React #WebDevelopment #Vercel #GitHubPages #NewsAPI #Frontend #DeveloperJourney #JavaScript

⚛️ That moment when I finally understood useCallback() 😅 While working on a React project, I had a parent component that passed a function down to a child via props. Everything looked fine — until I noticed my child component was re-rendering every time I clicked anything, even if the data didn’t change! 🤯 After a few rounds of confusion (and console logs everywhere 😆), I discovered the culprit: React was re-creating the function on every render. That’s when I met my new best friend — useCallback() 💪 Here’s how it saved me 👇 ❌ Before: function Parent() { const [count, setCount] = useState(0); const handleClick = () => console.log("Clicked!"); return <Child onClick={handleClick} />; } ✅ After using useCallback(): function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => console.log("Clicked!"), []); return <Child onClick={handleClick} />; } 💡 Lesson learned: useCallback() tells React: 👉 “Hey, this function is the same unless dependencies change.” No more unnecessary re-renders. 🚀 React isn’t just about writing components — it’s about learning how to make them efficient! #ReactJS #useCallback #WebDevelopment #MERNStack #FrontendDeveloper #PerformanceOptimization #LearningByDoing #JavaScript #ReactHooks

🚀 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐟 𝟐𝟎𝟐𝟓: 𝐋𝐞𝐬𝐬 𝐁𝐨𝐢𝐥𝐞𝐫𝐩𝐥𝐚𝐭𝐞, 𝐌𝐨𝐫𝐞 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, 𝐚𝐧𝐝 𝐅𝐫𝐞𝐞𝐝𝐨𝐦 React developers, if you missed the latest announcements, it's time to pay attention. React is shedding its historical baggage to focus purely on performance and developer sanity. Here's my take on the biggest updates that will change how we write code: 𝐓𝐡𝐞 𝐃𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲 𝐀𝐫𝐫𝐚𝐲 𝐍𝐢𝐠𝐡𝐭𝐦𝐚𝐫𝐞 𝐢𝐬 𝐎𝐕𝐄𝐑! The new useEffectEvent hook is an absolute lifesaver. No more endless, unnecessary re-runs of effects just because a non-reactive function was in the dependency array. This is a massive step for avoiding bugs (and potential outages, a la Cloudflare's legendary 2024 episode! 😉). 𝐓𝐡𝐞 𝐂𝐨𝐦𝐩𝐢𝐥𝐞𝐫 𝐖𝐞 𝐃𝐞𝐬𝐞𝐫𝐯𝐞: React Compiler 1.0 is stable! This is the real star. We can finally start retiring our manually scattered useMemo and useCallback hooks, which let's be honest, often did more harm than good or were simply tedious boilerplate. Hello, automatic performance optimization. 𝐈𝐧𝐭𝐞𝐥𝐥𝐢𝐠𝐞𝐧𝐭 𝐔𝐈 𝐒𝐭𝐚𝐭𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭: The Activity component gives us a native, smart way to hide/show elements. It maintains state and intelligently de-prioritizes work for hidden components—a great performance boost over just using CSS. 𝐀 𝐍𝐞𝐰 𝐄𝐫𝐚 𝐨𝐟 𝐈𝐧𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐞: The transition of React and React Native to the React Foundation, separate from Meta, is crucial for long-term governance and community trust. A great move for the ecosystem! 𝐓𝐡𝐞 𝐅𝐮𝐭𝐮𝐫𝐞 𝐢𝐬 𝐀𝐈-𝐅𝐫𝐢𝐞𝐧𝐝𝐥𝐲: A quick nod to Remix 3—a simpler, web-fundamentals-first framework that the authors of React Router are building, specifically citing an "AI-friendly" approach. The competition is good for all of us! React is moving from a framework that needed constant developer hand-holding (manual memoization) to one that just works fast. Get ready to ditch that boilerplate and write cleaner, more intuitive code. What are you most excited to drop from your next PR: useMemo or the dependency array headache? 👇 #React #ReactConf2025 #FrontendDevelopment #JavaScript #WebDev #ReactCompiler

🚀 Starting My Node.js Journey (Day 1 & 2 Recap) This week, I officially began exploring Node.js — stepping beyond frontend JavaScript to understand how it powers the backend world. Here’s what I’ve covered so far 👇 🗓️ Day 1 — Getting Started ✅ Learned what Node.js is and how it runs JavaScript outside the browser. ✅ Understood the core architecture (V8 Engine + Event Loop). ✅ Installed Node & npm, explored REPL, and ran my first script using node app.js. ✅ Built a small CLI Math Tool using process.argv to perform add, sub, mul, and div directly from the terminal. 💻 Sample Run: node mathTool.js add 10 5 ➡️ Result: 15 🗓️ Day 2 — Understanding Modules ✅ Explored how Node.js uses require() and module.exports to create modular, reusable code. ✅ Practiced destructuring imports like { add } = require('./math'). ✅ Learned how to structure multi-file projects for better maintainability. 💻 Mini Project: Temperature Converter App 🌡️ Built using three modules: converter.js → handles conversion logic utils.js → handles output formatting app.js → main CLI file Example: node app.js CtoF 30 ➡️ Converted temperature: 86.00°F 🧠 Key Takeaway: Even in just two days, I realized how powerful Node.js is when it comes to modular design, simplicity, and running JavaScript beyond the browser. #Nodejs #BackendDevelopment #LearningInPublic #JavaScript #MERNstack #100DaysOfCode #DevelopersJourney

💡 Understanding React Hooks — The Game Changer in Modern React Development When React introduced Hooks, it completely transformed how developers write components. No more juggling between class components and lifecycle methods — Hooks made it possible to use state and side effects in functional components. Here’s why they matter: ✅ Cleaner Code – Hooks remove the need for complex class syntax. ✅ Reusability – With custom hooks, logic can be shared easily across components. ✅ Better Readability – Functional components are easier to reason about and test. Some key hooks every React developer should know: 🔹 useState – For managing component state. 🔹 useEffect – For side effects like fetching data or handling subscriptions. 🔹 useContext – For accessing global data without prop drilling. 🔹 useRef – For referencing DOM elements or persisting mutable values. 🔹 useMemo / useCallback – For optimizing performance. And of course, custom hooks let you encapsulate logic like authentication, fetching, or form handling into clean, reusable functions. 👉 If you’re still writing class components, now’s the time to explore Hooks. They make React more expressive, modular, and fun to work with! What’s your favorite hook, and how has it simplified your workflow? #React #JavaScript #WebDevelopment #Frontend #Coding #Hooks #ReactJS

🚀 𝐃𝐚𝐲 𝟐 – 𝐌𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 𝐯𝐬 𝐌𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤𝐬 𝐢𝐧 𝐍𝐨𝐝𝐞.𝐣𝐬 ⚙️ 💚 Day 2 of my 15-Day Advanced Node.js Challenge! Yesterday, I explored how the Event Loop makes Node.js fast and non-blocking. Today, I went a step deeper — understanding the Microtask Queue and Macrotask Queue, the real reason behind how async code executes in Node.js 🔁 ❓ 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧: 𝐂𝐚𝐧 𝐲𝐨𝐮 𝐠𝐮𝐞𝐬𝐬 𝐭𝐡𝐞 𝐨𝐮𝐭𝐩𝐮𝐭 𝐨𝐟 𝐭𝐡𝐢𝐬 𝐜𝐨𝐝𝐞? 👇 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐒𝐭𝐚𝐫𝐭"); 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭(() => 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐌𝐚𝐜𝐫𝐨𝐭𝐚𝐬𝐤"), 𝟎); 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐫𝐞𝐬𝐨𝐥𝐯𝐞().𝐭𝐡𝐞𝐧(() => 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐌𝐢𝐜𝐫𝐨𝐭𝐚𝐬𝐤")); 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐄𝐧𝐝"); 🧠 𝐖𝐡𝐲? Node.js first executes all synchronous code (Start, End). Then it runs all Microtasks (Promises, process.nextTick). Finally, it executes Macrotasks (setTimeout, setImmediate). ⚙️ 𝐊𝐞𝐲 𝐭𝐚𝐤𝐞𝐚𝐰𝐚𝐲: Understanding the difference between microtasks and macrotasks is essential for debugging timing issues and writing efficient async logic. Master this, and you’ll never be confused by async behavior again 🚀 💬 𝐘𝐨𝐮𝐫 𝐓𝐮𝐫𝐧: Have you ever encountered async bugs due to the wrong task order? How did you solve them? Let’s share experiences below 👇 #NodeJS #BackendDeveloper #JavaScript #EventLoop #AsyncProgramming #LearningInPublic #CareerGrowth #15DaysChallenge #CodingJourney

🚀 𝐃𝐚𝐲 𝟏 – 𝐍𝐨𝐝𝐞.𝐣𝐬 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 𝐃𝐞𝐞𝐩 𝐃𝐢𝐯𝐞 🔁 💚 Day 1 of my 15-Day Advanced Node.js Challenge! Today’s topic: The Event Loop in Node.js 🌀 The Event Loop is the heart of Node.js — it allows JavaScript to handle asynchronous operations efficiently, even though it runs on a single thread. Let’s test your Node.js knowledge 👇 ❓ 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧: 𝐖𝐡𝐞𝐧 𝐲𝐨𝐮 𝐫𝐮𝐧 𝐭𝐡𝐞 𝐜𝐨𝐝𝐞 𝐛𝐞𝐥𝐨𝐰, 𝐰𝐡𝐚𝐭 𝐝𝐨 𝐲𝐨𝐮 𝐭𝐡𝐢𝐧𝐤 𝐠𝐞𝐭𝐬 𝐩𝐫𝐢𝐧𝐭𝐞𝐝 𝐟𝐢𝐫𝐬𝐭? 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐒𝐭𝐚𝐫𝐭"); 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭(() => 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐓𝐢𝐦𝐞𝐨𝐮𝐭"), 𝟎); 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐫𝐞𝐬𝐨𝐥𝐯𝐞().𝐭𝐡𝐞𝐧(() => 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐏𝐫𝐨𝐦𝐢𝐬𝐞")); 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐄𝐧𝐝"); 🧠 Why? console.log() runs immediately (synchronous). setTimeout() goes to the macrotask queue. Promise.then() goes to the microtask queue, which runs before macrotasks. ⚙️ Key takeaway: The Event Loop first completes synchronous code, then runs microtasks, then moves to macrotasks (like timers). Understanding this helps write non-blocking, high-performance Node.js apps and makes debugging async code much easier! 💬 Your turn: Have you ever faced confusing async behavior in your Node.js code? How did you fix it? #NodeJS #EventLoop #AsyncProgramming #BackendDevelopment #LearningInPublic #JavaScript #15DaysChallenge #Developers

Still writing all your logic inside your React components? I’ve been there, and it gets messy fast. My "aha" moment came when a component hit 400 lines. It was a tangled mess of `useState` and `useEffect` hooks for fetching data, handling form state, and managing a timer. The real problem? It was impossible to test or reuse any of it. 🧠 The solution was simple: custom hooks. By extracting logic into functions like `useUserData()` or `useFormInput()`, my components became lean, readable, and focused only on the 𝐕𝐈𝐄𝐖. It’s a pattern that feels like a superpower for clean code. ⚡️ If you’re repeating stateful logic, extract it. Your future self will thank you. What small change made a huge impact in your workflow? #ReactJS #FrontendDevelopment #DeveloperTips

When you’re starting with React, one of the most confusing moments is when you update a state variable… and nothing changes on the screen. Here’s why 👇 React doesn’t react to value changes — it reacts to state triggers. When you call setState, React knows something changed, prepares a new “snapshot” of your data, and decides when and how to re-render efficiently. But if you change the state directly, React has no idea. It doesn’t re-render because it never got the signal. This is called immutability — React creates new versions of state instead of changing the old one. That’s how it keeps your app predictable, efficient, and bug-free. In this post, I’ve explained in plain language: ✅ How React’s state engine actually works ✅ Why direct mutation fails silently ✅ What “immutability” and “pure functions” really mean ✅ The mindset shift from “coding UI” to “managing data flow” If you’re a student or beginner learning React, this concept is a game-changer. It’s not just about syntax — it’s about understanding how React thinks. Once you get that, everything else starts to click. 💬 Share this with a friend who’s learning React — this one tip can save hours of debugging. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #SoftwareEngineering #CollegeProjects #CareerInTech #LearnToCode #Codeviji