Node.js Event Loop Starvation: Avoiding Busy Loops

Ever chased a “random” JS bug that disappears when you add a console.log? 👀 That’s usually execution context + the call stack + memory lifecycle showing their teeth 🧠⚙️ Here’s the mental model I keep: 1) Creation phase: JS sets up the execution context (scope, hoisting, this). Functions are allocated, vars get placeholders. 2) Execution phase: values get assigned, code runs, stack frames push/pop. The call stack is brutally simple: - each function call = a new frame 📚 - deep sync recursion = “Maximum call stack size exceeded” 💥 - async doesn’t “sit” on the stack; callbacks re-enter later via the event loop ⏱️ Memory lifecycle is where apps bleed: - closures keep references alive (great for encapsulation, risky for leaks) 🔒 - in React/Next.js, long-lived listeners, intervals, and cached closures can retain stale state - in Node.js, a “small” in-memory map keyed by user/session can quietly become a leak 🧯 Practical takeaway: When debugging, ask “What’s on the stack right now?” and “What is still referenced?” If something can still be reached, GC won’t free it. What’s your most painful closure/leak story? 😅 #javascript #nodejs #reactjs #webperformance #softwareengineering

Recently at my company, I encountered a production issue related to package transpilation in a Next.js application. At first glance, everything seemed fine. The app worked perfectly in modern browsers. But monitoring tools started reporting unexpected syntax errors originating from generated .next chunk files. After deep debugging and analyzing stack traces, I discovered the root cause: A dependency was shipping modern ESM syntax (including optional chaining), and since Next.js does not transpile node_modules by default, certain environments (bots, crawlers, older JS engines) were failing to parse the code. The issue wasn’t in our application logic—it was at the build boundary between app code and third-party packages. The solution? Using transpilePackages in next.config.ts to explicitly transpile the affected packages and ensure compatibility across all environments. I’ve written a detailed Medium article explaining: What transpilePackages is Why Next.js doesn’t transpile node_modules by default How ESM-first packages can introduce hidden production risks How to identify and resolve these issues Why understanding build systems still matters in the AI era If you’re working with Next.js, modern UI libraries, or ESM-heavy dependencies, this might save you hours of debugging. https://lnkd.in/dW3wySKn Modern frameworks abstract complexity. But production reliability still depends on understanding what happens after next build. #NextJS #JavaScript #Frontend #WebDevelopment #BuildSystems #ESM #Engineering

🚀 What is Event Bubbling in Node.js? Many developers confuse Event Bubbling in the browser with how events work in Node.js. Let’s clear this up 👇 In the browser, event bubbling means: When an event is triggered on a child element, it propagates upward to its parent elements in the DOM tree. But in Node.js, things are different. Node.js does NOT have: ❌ DOM ❌ Parent-child event propagation Instead, Node.js follows an Event-Driven Architecture using the built-in: 👉 EventEmitter 💡 How Events Work in Node.js Node.js uses the events module: const EventEmitter = require('events'); const emitter = new EventEmitter(); emitter.on('greet', () => { console.log('Hello Developer!'); }); emitter.emit('greet'); Here’s what happens: 1️⃣ We register a listener using .on() 2️⃣ We trigger the event using .emit() 3️⃣ The callback runs immediately There is no bubbling phase like in the browser. 🔥 Key Difference Browser (DOM)Node.jsHas event bubblingNo bubblingParent-child propagationDirect listener executionDOM-basedEventEmitter-based 🎯 Why This Matters Understanding this difference helps you: Avoid confusion during interviews Design scalable event-driven systems Write cleaner backend logic Node.js is powerful because it is built around non-blocking, event-driven architecture. 💬 Final Takeaway 👉 Event Bubbling belongs to the browser world. 👉 Node.js uses EventEmitter, not DOM propagation. Two environments. Two different event models. One JavaScript. 💚 If you’re learning backend with Node.js, this concept is fundamental. #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #EventDriven #FullStackDeveloper

A lot of developers think 𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴, 𝗳𝗲𝘁𝗰𝗵, 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 are part of JavaScript. 𝗧𝗵𝗲𝘆’𝗿𝗲 𝗻𝗼𝘁. They’re 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 — provided by the browser (or runtime) to the 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲. JavaScript itself? It’s a 𝘀𝗶𝗻𝗴𝗹𝗲-𝘁𝗵𝗿𝗲𝗮𝗱𝗲𝗱, 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 language. 𝗧𝗶𝗺𝗲, 𝗧𝗶𝗱𝗲 𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝘄𝗮𝗶𝘁 𝗳𝗼𝗿 𝗻𝗼𝗻𝗲          - A Wise Man (Idk who said it but I'm sure he was wise) So how does async work? 👇  • The JS engine executes code line by line.  • When it hits 𝗳𝗲𝘁𝗰𝗵 𝗼𝗿 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁, 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝘁𝗮𝗸𝗲𝘀 𝗼𝘃𝗲𝗿.  • Once the task completes, the result is pushed to the event loop - can be the 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 𝗼𝗿 𝘁𝗵𝗲 𝗠𝗮𝗰𝗿𝗼.  • The callback/promise gets executed when the 𝗰𝗮𝗹𝗹 𝘀𝘁𝗮𝗰𝗸 𝗶𝘀 𝗳𝗿𝗲𝗲. So technically… JavaScript isn’t “naturally asynchronous” It’s synchronous — powered by async capabilities from its environment. 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗿𝘂𝗻𝘁𝗶𝗺𝗲𝘀 = 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗔𝗣𝗜𝘀. Browser ≠ Node ≠ Deno A few more 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 we use often - 𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵, 𝘸𝘪𝘯𝘥𝘰𝘸, 𝘩𝘪𝘴𝘵𝘰𝘳𝘺, 𝘭𝘰𝘤𝘢𝘵𝘪𝘰𝘯, 𝘭𝘰𝘤𝘢𝘭𝘚𝘵𝘰𝘳𝘢𝘨𝘦, 𝘴𝘦𝘴𝘴𝘪𝘰𝘯𝘚𝘵𝘰𝘳𝘢𝘨𝘦, 𝘯𝘢𝘷𝘪𝘨𝘢𝘵𝘰𝘳 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘦𝘳𝘳𝘰𝘳 (𝘤𝘰𝘯𝘴𝘰𝘭𝘦 𝘪𝘴 𝘵𝘩e 𝘈𝘗𝘐, 𝘦𝘳𝘳𝘰𝘳() 𝘪𝘴 𝘵𝘩𝘦 𝘮𝘦𝘵𝘩𝘰𝘥), 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘥𝘪𝘳 𝘧𝘴, 𝘱𝘳𝘰𝘤𝘦𝘴𝘴, 𝘩𝘵𝘵𝘱, 𝘦𝘵𝘤. #JavaScript #WebDevelopment #EventLoop #SoftwareEngineering

#Props vs #State was the React concept that finally leveled me up. For a long time, I treated them like the same thing. If data worked… I didn’t question it, then bugs started showing up. Components behaved unpredictably, and debugging felt like guesswork. That’s when it clicked: 👉 Props are passed to a component. 👉 State lives inside a component. ✔️ Props are read-only. ✔️ State is managed. Once I respected that boundary, my components became simpler, reusable, and easier to debug. React didn’t get easier overnight — but my thinking got clearer. If Props vs State feels confusing right now, that confusion might be the exact moment you’re about to level up. 🚀 #React #FrontendDevelopment #JavaScript #LearningReact #WebDevJourney #ReactLife #props #state #Learning #Developer

𝗦𝘁𝗼𝗽 𝘁𝘂𝗿𝗻𝗶𝗻𝗴 𝗲𝘃𝗲𝗿𝘆 𝘂𝘁𝗶𝗹𝗶𝘁𝘆 𝗶𝗻𝘁𝗼 𝗮 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸. I used to think everything in a React project had to start with "use." Big mistake. It made my testing way harder and my logic felt unnecessarily brittle. Here is the mental shift that finally clicked for me: 𝗦𝗶𝗺𝗽𝗹𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 Use these for pure logic or data transformation. If you're writing formatDate(), calculateTotal(), or validateEmail(), you don't need React. These are portable, they work anywhere, and you can unit test them in a second. 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀 Save these for when you actually need React’s "superpowers." If your logic depends on useState, useEffect, or useContext, that’s a hook. Think useToggle() or useAuth(). Its only job is to sync your logic with the component lifecycle. 𝗧𝗵𝗲 𝗥𝘂𝗹𝗲 𝗼𝗳 𝗧𝗵𝘂𝗺𝗯 I ask myself one question: "Does this touch state, effects, or context?" If 𝗬𝗘𝗦 — Custom Hook. If 𝗡𝗢 — Simple JS Function. 𝗣𝗿𝗼 𝗧𝗶𝗽: Start with a simple function. Only "upgrade" it to a hook if the React lifecycle forces your hand. Keep your React toolbox for React problems, and use standard JS for the rest. #ReactJS #JavaScript #WebDevelopment #Programming #CleanCode

Today, this way of thinking feels completely natural — but when I was learning React, I struggled a lot with understanding what useEffect is actually for and when it should be used. I went from avoiding it altogether to wanting to solve everything with useEffect, until that moment when it finally clicked: it’s about syncing with the outside world, not normal render logic. Once that sank in, everything became much clearer. A great reminder that good React is about intentional choices, not more hooks. 👏

🚀 JavaScript Challenge: Do you know how Closures and Event Loops work? Pop quiz for my fellow developers! 💻 Look at the code snippet below. What do you think the console will output? Is it 0, 1, 2? Or perhaps 3, 3, 3? 💡 The Explanation If you guessed 3, 3, 3, you’re right! But do you know why? This is a classic interview question that tests your understanding of Scope, Closures, and the Event Loop. Here is the breakdown: 1. Global Scope: The variable i is declared using let outside the loop. This means there is only one instance of i shared across every iteration. 2. The Event Loop: setTimeout is asynchronous. It schedules the log function to run after 100ms. By the time that 100ms passes, the for loop has already finished executing. 3. The Final Value: When the loop finishes, the value of i has been incremented to 3 (the condition that broke the loop). 4. Closure in Action: When the three scheduled log functions finally execute, they all look at that same single variable i, which is now 3 🛠️ How to fix it? If you wanted to output 0, 1, 2, the simplest fix is to move the declaration of i inside the loop head: for (let i = 0; i < 3; i++). This creates a block scope for each iteration, effectively "capturing" the value of i at that specific moment. Why this matters: Writing clean code is about more than just making it work—it's about understanding the underlying mechanics of the language to prevent memory leaks and unexpected bugs. #JavaScript #WebDevelopment #CodingChallenge #SoftwareEngineering #Frontend #TechCommunity

It always starts small. You log an array… and suddenly you see it the same value showing up twice. Then three times. Then everywhere. Duplicates sneak into apps through APIs, user input, and merged data. And if you don’t handle them early, they turn into bugs you didn’t see coming. That’s why every JavaScript developer should know more than one way to remove duplicates from an array. In this post, I break down 5 different ways from the clean one-liner to more flexible approaches and when each one makes sense. Because writing JavaScript isn’t just about making things work… it’s about making them reliable. 👇🏾 Swipe through and level up your JS fundamentals. #JavaScript #WebDev #FrontendDevelopment #CodingTips #LearnJavaScript #BuildInPublic

𝐑𝐞𝐚𝐜𝐭 𝐣𝐮𝐬𝐭 𝐠𝐨𝐭 𝐚 𝐰𝐡𝐨𝐥𝐞 𝐥𝐨𝐭 𝐜𝐥𝐞𝐚𝐧𝐞𝐫. ✨ If you’ve just started exploring React 19, the first thing you’ll notice is how much "boilerplate noise" we can finally delete. The shift from useEffect to the new use() hook is a perfect example. Here is the breakdown of what's happening in this image: ⬅️ 𝐓𝐡𝐞 𝐋𝐞𝐟𝐭: 𝐓𝐡𝐞 "𝐎𝐥𝐝" 𝐖𝐚𝐲 (𝐑𝐞𝐚𝐜𝐭 <𝟏𝟖) This is the pattern we've used for years, but it has always felt a bit clunky: 𝐌𝐚𝐧𝐮𝐚𝐥 𝐒𝐭𝐚𝐭𝐞: We had to create useState for the data, the loading spinner, and the error handling. 𝐓𝐡𝐞 𝐋𝐢𝐟𝐞𝐜𝐲𝐜𝐥𝐞 𝐓𝐫𝐚𝐩: We relied on useEffect to trigger the fetch on mount. Verbosity: It takes about 15 lines of code just to display one piece of data. ➡️ 𝐓𝐡𝐞 𝐑𝐢𝐠𝐡𝐭: 𝐓𝐡𝐞 "𝐍𝐞𝐰" 𝐖𝐚𝐲 (𝐑𝐞𝐚𝐜𝐭 𝟏𝟗) With the introduction of the use() hook, the code becomes declarative: 𝐃𝐢𝐫𝐞𝐜𝐭 𝐔𝐧𝐰𝐫𝐚𝐩𝐩𝐢𝐧𝐠: No more effects. The use(promise) hook handles the resolution of the data directly in the render path. 𝐒𝐮𝐬𝐩𝐞𝐧𝐬𝐞 𝐈𝐧𝐭𝐞𝐠𝐫𝐚𝐭𝐢𝐨𝐧: We no longer need manual if (loading) checks. React handles the "waiting" state using <Suspense> boundaries higher up the tree. 𝐏𝐮𝐫𝐞 𝐋𝐨𝐠𝐢𝐜: We've gone from 15+ lines of ceremony to just 2 or 3 lines of actual logic. I am officially moving our projects toward this cleaner, more readable syntax. #webdeveloper #ReactJS #React19 #react18 #WebDevelopment #CleanCode #JavaScript #SoftwareEngineering #Frontend #Reactnative