From Controlled to Uncontrolled React Inputs

A promise is just an object with two properties. The word "promise" sounds abstract. The actual thing is surprisingly concrete. When fetch() runs, JavaScript immediately returns an object - before any data has come back. That object has two properties: - value (undefined for now) - onFulfillment (an array of functions to run when value arrives) That's it. A placeholder with a slot for data and a list of what to do when it shows up. When the browser finishes the network request, it fills in value and auto-triggers everything in onFulfillment - passing the value as the argument. You get something immediately so your code can keep moving, and you attach behavior to a future value. That's the whole mechanism behind async JavaScript. Next: .then() - what it's actually doing (hint: not what the name implies). #JavaScript #WebDevelopment #SoftwareEngineering #Frontend

🤔 Why does this code NOT run in the order you expect? You set a timeout of 0ms… But it still runs after the next console.log() 😳 👉 Isn’t 0 supposed to mean immediate? 🚀 One of the most important (and misunderstood) concepts in JavaScript: The Event Loop 🧠 What is the Event Loop? JavaScript is single-threaded 🧵 (It can do only ONE thing at a time) But somehow… it handles: - API calls 🌐 - Timers ⏱️ - User clicks 🖱️ 👉 smoothly, without blocking everything 💡 That’s because of the Event Loop ⚙️ The 4 Core Components : 1️⃣ Call Stack → Where code runs (LIFO) 2️⃣ Web APIs → Browser handles async tasks 3️⃣ Microtask Queue → Promises (high priority) 4️⃣ Macrotask Queue → setTimeout, events 🔄 How it actually works 1. Code runs in the Call Stack 2. Async tasks (like setTimeout) go to Web APIs 3. When done → they move to queues 4. The Event Loop constantly checks: "Is the Call Stack empty?" 5. If the stack is empty, it pushes the first task from the queue into the stack to be run. ⚡ The “0ms Timeout” Paradox Even with 0ms, setTimeout is NOT immediate. 👉 It still goes to the queue 👉 It waits for the stack to clear 🔥 Microtask vs Macrotask (Game Changer) 👉 Microtasks > Macrotasks That means: - Promises run BEFORE setTimeout - Even if timeout is 0ms 😅 💡 Real Dev Insight : If your UI freezes 🧊 👉 It’s NOT always JavaScript or your logic It’s often: - Blocking the Call Stack - Long synchronous code 🚨 When the stack is busy → NOTHING else runs (No clicks, no animations, no updates) 🚀 Final Thought JavaScript isn’t slow… 👉 Blocking it makes it slow Understanding the Event Loop = Better performance + fewer bugs + stronger fundamentals 💪 #JavaScript #FrontendDevelopment #WebDevelopment #EventLoop #AsyncJavaScript #CodingTips #LearnJavaScript #BuildInPublic #100DaysOfCode

🚀 Day 5/30 — Async/Await changed JavaScript forever Before async/await, we wrote: 𝘭𝘰𝘨𝘪𝘯𝘜𝘴𝘦𝘳() .𝘵𝘩𝘦𝘯(𝘨𝘦𝘵𝘖𝘳𝘥𝘦𝘳𝘴) .𝘵𝘩𝘦𝘯(𝘱𝘳𝘰𝘤𝘦𝘴𝘴𝘗𝘢𝘺𝘮𝘦𝘯𝘵) .𝘤𝘢𝘵𝘤𝘩(𝘩𝘢𝘯𝘥𝘭𝘦𝘌𝘳𝘳𝘰𝘳) Worked well… But async/await made asynchronous code feel natural: 𝘵𝘳𝘺 { 𝘤𝘰𝘯𝘴𝘵 𝘶𝘴𝘦𝘳 = 𝘢𝘸𝘢𝘪𝘵 𝘭𝘰𝘨𝘪𝘯𝘜𝘴𝘦𝘳(); 𝘤𝘰𝘯𝘴𝘵 𝘰𝘳𝘥𝘦𝘳𝘴 = 𝘢𝘸𝘢𝘪𝘵 𝘨𝘦𝘵𝘖𝘳𝘥𝘦𝘳𝘴(𝘶𝘴𝘦𝘳.𝘪𝘥); 𝘢𝘸𝘢𝘪𝘵 𝘱𝘳𝘰𝘤𝘦𝘴𝘴𝘗𝘢𝘺𝘮𝘦𝘯𝘵(𝘰𝘳𝘥𝘦𝘳𝘴); } 𝘤𝘢𝘵𝘤𝘩(𝘦𝘳𝘳){ 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘦𝘳𝘳𝘰𝘳(𝘦𝘳𝘳); } Cleaner. Easier to debug. Easier to maintain. 𝐁𝐮𝐭 𝐡𝐞𝐫𝐞’𝐬 𝐭𝐡𝐞 𝐦𝐢𝐬𝐭𝐚𝐤𝐞 𝐦𝐚𝐧𝐲 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐦𝐚𝐤𝐞👇 await getUsers(); await getOrders(); await getProducts(); ❌ Slow (runs sequentially) Better: await Promise.all([ getUsers(), getOrders(), getProducts() ]); ✅ Concurrent + faster 💡 Big lesson: Async/Await improved readability. Promise.all() improves performance. Small code decisions create big scalability differences. What do you prefer in production: Async/Await or .then() chains? #NodeJS #JavaScript #AsyncAwait #BackendDevelopment #SoftwareEngineering

One thing I’ve learned from working on production systems: performance issues are rarely caused by one big problem — they’re usually a collection of small, overlooked mistakes. I’ve written about 5 JavaScript mistakes I frequently see and how to fix them effectively. 🔗 https://lnkd.in/gZpfsx8Q #Engineering #JavaScript #WebDev #Performance

1,200 lines of form code deleted from a production dashboard — and the forms actually work better now.   That's what happens when you swap React Hook Form for React 19's built-in Actions + useActionState on the right kind of project.   Here's the thing most tutorials won't tell you: this isn't a blanket "RHF is dead" story. It's a "know when to use what" story.   → Simple CRUD forms (login, contact, settings)? useActionState + useOptimistic handles it natively. No extra deps, no bundle cost, instant optimistic UI out of the box.   → Complex dynamic forms (nested arrays, conditional fields, 50+ field wizards)? React Hook Form still wins. React 19 has no built-in validation beyond HTML attributes — and managing deeply nested field arrays without RHF is pain you don't need.   → The middle ground is where it gets interesting. Forms with 5–15 fields and basic Zod validation? You can go either way. We leaned native and didn't look back.   The real unlock isn't "drop the library." It's that React's form primitives finally work well enough that you can evaluate each form on its own complexity instead of reaching for RHF by default on every project.   Three questions before you refactor: 1. Do any of your forms have dynamic field arrays? 2. Are you using RHF's validation resolver pattern heavily? 3. Is your form state shared across multiple components?   If you answered "no" to all three, you might be carrying a dependency you don't need.   What's your team's take still all-in on React Hook Form, or have you started migrating simpler forms to Actions?   #ReactJS #FrontendDevelopment #WebDev #JavaScript #React19 #FormHandling #DeveloperProductivity

Understanding what happens when setState is called in React is crucial for effective component management. setState is primarily used to update the state of a component, but it's important to note that this update does not occur immediately. Here's a breakdown of the process: - React schedules the state update, meaning it does not happen instantly. - Multiple setState calls can be batched together for performance optimization. - React initiates the reconciliation process, which involves Virtual DOM diffing. - Only the parts of the UI that have changed are updated in the real DOM. Key points to remember include: - setState is asynchronous in most cases. - It can batch multiple updates together. - It triggers a re-render of the component. - React efficiently updates only what is necessary. Regarding state update patterns in React, it's essential to distinguish between class components and hooks: For class components: - Use this.setState({ count: this.state.count + 1 }); for direct updates. - Prefer functional updates with this.setState(prev => ({ count: prev.count + 1 })); For hooks: - Use setCount(count + 1); for basic updates. - For safety, use the functional update pattern: setCount(prev => prev + 1). #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #InterviewPrep

Stop using Date in JavaScript for new projects The Date object is now officially legacy. TC39 is replacing it with the Temporal API. If you're still writing new Date() in 2026, you're shipping technical debt. Why Date is a problem: Mutable by default: Calling setDate changes the original object. That’s how you get surprise bugs in production. Months start at zero: January is 0. December is 11. Every dev has been burned by this at least once. Timezone chaos: new Date("2026-01-01") can give you Dec 31st at night depending on where your server runs. One object for everything: No way to represent just a date or just a time. It’s always a full datetime whether you want it or not. How Temporal fixes this: It’s immutable, so every operation returns a new value. Months start at 1 like normal humans expect. And you get specific types: PlainDate for dates only, PlainTime for time only, ZonedDateTime when you care about timezones, Duration for math. Instead of adding 86400000 milliseconds to add a day, you just write add one day. Way cleaner. What to do today: For new projects, use date-fns or Day.js until Temporal lands in browsers. If you want to be future-proof, try the @js-temporal/polyfill now. Temporal is Stage 3 and landing soon. Don’t let legacy APIs hold your codebase back. What are you using for dates in 2026? Let me know below 👇 #JavaScript #WebDev #Temporal #CleanCode #Frontend #TypeScript

❓ Quick question:      Everything works fine… until you move your variable inside a function or block 💥 Why does JavaScript behave like this? 🤔 👉 What’s actually going on here? 🚀 Let’s decode one of the most confusing JavaScript concepts: Scope (Global, Function, Block) 🌍 1. Global Scope (var, let, const) If a variable is declared outside everything → it becomes globally accessible ✔ Works everywhere: • inside { } • inside if • inside loops • inside functions 💡 That’s why this runs smoothly everywhere. 🧠 2. Function Scope Variables declared inside a function are locked 🔒 inside it. 👉 Outside = ❌ Not accessible 👉 Inside = ✅ Works perfectly 💡 Key Insight: Function creates its own private world 📦 3. Block Scope (let & const) let and const are block scoped That means: 👉 Only accessible inside { } Outside the block → 💥 ReferenceError ⚠️ But here’s the twist… var is NOT block scoped ❗ 👉 It ignores { } blocks 👉 Gets hoisted to function/global scope So: Inside block → defined Outside block → still accessible 😲 🔥 Why this matters (real dev insight) Understanding scope helps you: - Avoid accidental bugs 🐛 - Write predictable code 🧠 - Prevent variable leaks ⚠️ - Debug faster 🚀 💡 Final Thought: Most beginners think: 👉 “Scope is simple” But in real-world apps: 👉 Scope mistakes = silent bugs + messy code 📌 Follow along — I’ll keep breaking down JavaScript concepts in a simple way. #JavaScript #FrontendDevelopment #WebDevelopment #CodingTips #LearnJavaScript #Scope #100DaysOfCode #BuildInPublic

JavaScript is single-threaded. But somehow it handles API calls, timers, promises, user clicks, and UI updates—all at the same time. That magic is called the Event Loop. Many frontend bugs are not caused by React. They happen because developers don’t fully understand how JavaScript handles async operations. Example: Promise callbacks run before setTimeout callbacks. That’s why this: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start End Promise Timeout Why? Because Promises go to the Microtask Queue, which gets priority over the Macrotask Queue like setTimeout. Understanding this helps with: ✔ Avoiding race conditions ✔ Writing better async code ✔ Debugging production issues faster ✔ Improving frontend performance ✔ Understanding React behavior better The Event Loop is not just an interview topic. It explains how your entire frontend application actually works. Master this once, and debugging becomes much easier. #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #AsyncJavaScript #Programming #SoftwareEngineering

Stop guessing the order of your console.logs. 🛑 JavaScript is single-threaded. It has one brain and two hands. So, how does it handle a heavy API call, a 5-second timer, and a button click all at once without catching fire? It’s all about the Event Loop, but specifically, the "VIP treatment" happening behind the scenes. The Two Queues You Need to Know: 1. The Microtask Queue (The VIP Line) 💎 What lives here: Promises (.then), await, and MutationObserver. The Rule: The Event Loop is obsessed with this line. It will not move on to anything else until this queue is bone-dry. If a Promise creates another Promise, JS stays here until they are all done. 2. The Macrotask Queue (The Regular Line) 🎟️ What lives here: setTimeout, setInterval, and I/O tasks. The Rule: These tasks are patient. The Event Loop only picks one at a time, then goes back to check if any new VIPs (Microtasks) have arrived. The "Aha!" Moment Interview Question: What is the output of this code? (Most junior devs get this wrong). JavaScript console.log('Start'); setTimeout(() => console.log('Timeout'), 0); Promise.resolve().then(() => console.log('Promise')); console.log('End'); The Reality: 1. Start (Sync) 2. End (Sync) 3. Promise (Microtask - Jumps the line!) 4. Timeout (Macrotask - Even at 0ms, it waits for the VIPs) The Pro-Tip for Performance 💡 If you have a heavy calculation, don't wrap it in a Promise thinking it makes it "background." It’s still on the main thread! Use Web Workers if you really want to offload the heavy lifting. Does the Event Loop still confuse you, or did this click? Let's discuss in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #Frontend