Fixing Stale Closures in React with Correct Dependencies

I once spent hours debugging something that made no sense. The code looked correct. The logic was simple. But the console logs were appearing in a strange order. Something like this: Promise 𝗿𝗲𝘀𝗼𝗹𝘃𝗲𝗱 Then 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 Then another log I expected earlier. That’s when I discovered something many JavaScript developers overlook: Not all async tasks are treated the same. Some go to the 𝗺𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. Some go to the 𝗺𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. And JavaScript always clears microtasks first before moving to the next macrotask. That’s why: Promises, 𝗾𝘂𝗲𝘂𝗲𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸, 𝗠𝘂𝘁𝗮𝘁𝗶𝗼𝗻𝗢𝗯𝘀𝗲𝗿𝘃𝗲𝗿 run earlier. While things like: 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁, 𝘀𝗲𝘁𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹, 𝗗𝗢𝗠 𝗲𝘃𝗲𝗻𝘁𝘀 wait for the next event loop cycle. Once I understood this, a lot of 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝘄𝗲𝗶𝗿𝗱 moments stopped being weird. They were just the event loop doing exactly what it was designed to do. Sometimes the bug isn’t in the code. It’s in our 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 of how the runtime works. #JavaScript #EventLoop #FrontendEngineering #SoftwareEngineering

PhantomRaven campaign hits npm with 88 malicious packages in four waves, using slopsquatting and Remote Dynamic Dependencies to steal dev data like config files and CI/CD tokens. #PhantomRaven #JavaScript #SupplyChain ➡️ https://ift.tt/5ePIGQs

⚡ Microtask vs Macrotask Why does Promise.then() run before setTimeout() — even when the delay is 0 ms? Most developers think 0 ms means “immediately”. But JavaScript has a different rule. Here’s what actually happens: 1️⃣ Call Stack executes 2️⃣ All Microtasks run 3️⃣ One Macrotask runs 4️⃣ Repeat And since Promises go to the Microtask Queue, they execute BEFORE Macrotasks like setTimeout(). That’s why: Promise > setTimeout Understanding this small detail can completely change how you debug async code. 💬 Quick Question: What will log first? setTimeout(() => console.log("A"), 0) Promise.resolve().then(() => console.log("B")) Comment your answer 👇 #JavaScript #WebDevelopment #FrontendDeveloper #AsyncProgramming #EventLoop #KeepCoding

💡 JavaScript Event Bubbling vs Capturing — a common misconception Ever clicked an element and expected 6 console logs, but only got 3? You’re not crazy — this is a classic DOM events gotcha. 👉 Key insight: Events always go through both capturing and bubbling phases, but listeners only fire in the phase they’re registered for. addEventListener('click', handler, true) That true means: ➡️ “Listen only during the capturing phase” So if you register: 3 capture listeners 0 bubble listeners You’ll see 3 logs, not 6 — even though bubbling did happen. To get all 6 logs, you must explicitly register both: capture listeners (true) bubble listeners (default) 🧠 Mental model that sticks: Capture = top → down Bubble = target → up No listener = no log Understanding this saves hours of debugging... #JavaScript #WebDevelopment #Frontend #DOM #LearningInPublic #SoftwareEngineering

🧠 JavaScript Async/Await Challenge What will be the output? async function test() { console.log("1"); await Promise.resolve(); console.log("2"); } console.log("3"); test(); console.log("4"); Options: A) 3 1 2 4 B) 3 1 4 2 C) 1 3 4 2 D) 3 4 1 2 #javascript #frontenddeveloper #webdevelopment #codingchallenge

🧠 JavaScript Async/Await Challenge What will be the output? async function test() { console.log("1"); await Promise.resolve(); console.log("2"); } console.log("3"); test(); console.log("4"); Options: A) 3 1 2 4 B) 3 1 4 2 C) 1 3 4 2 D) 3 4 1 2 What do you think the output will be? 👀 #javascript #frontenddeveloper #webdevelopment #codingchallenge

Day 13 #100DaysOfCode 💻 Today I learned about JavaScript Promises. Promises are objects that handle asynchronous operations and have three states: pending, fulfilled, and rejected. They make async code more readable compared to callbacks. let promise = new Promise((resolve, reject) => { let success = true; success ? resolve("Task completed!") : reject("Task failed!"); }); promise .then(result => console.log(result)) .catch(error => console.log(error)); It feels great to finally understand how async tasks can be managed smoothly with promises! #JavaScript #WebDevelopment #Akbiplob

JavaScript is single-threaded, but async code doesn’t just run whenever it feels like it. The engine processes: The call stack Then microtasks (Promises) Then macrotasks (setTimeout, etc.) Which means this: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Logs: Start End Promise Timeout Even with 0ms, setTimeout waits until the microtask queue is empty. Once I understood that, async bugs stopped feeling random. The event loop isn’t just trivia, it’s how you reason about timing instead of guessing. #JavaScript #EventLoop #AsyncProgramming #WebDevelopment

🚀 The End of an Era: TypeScript 6.0 Beta This isn't just another update—it’s the final major release built on JavaScript. 🔚 As the team prepares to rewrite the compiler in Go for version 7.0, TS 6.0 stands as the "grand finale" of the JS-powered era. It’s all about peak stability and bridging the gap to a high performance future. End of a chapter, start of a powerhouse. ⚡️ #typescript #javascript

🚨 Understanding the Temporal Dead Zone (TDZ) in JavaScript If you’ve worked with let and const, you might have encountered this error: console.log(a); let a = 10; ❌ ReferenceError: Cannot access ‘a’ before initialization This happens because of the Temporal Dead Zone (TDZ). 👉 The Temporal Dead Zone is the time between when a variable is hoisted and when it is initialized. During this phase, the variable exists in memory but cannot be accessed. Key Points: ✅ var is hoisted and initialized with undefined ❌ let and const are hoisted but stay in the TDZ until initialization ⚠️ Accessing them early throws a ReferenceError // TDZ Example { console.log(x); // ❌ TDZ let x = 5; } 💡 Why TDZ exists? It helps catch bugs early and prevents the use of variables before they are properly initialized. Understanding TDZ is essential for writing predictable and bug-free JavaScript code. #JavaScript #WebDevelopment #Frontend #Programming