Aamir Muhammad Amin’s Post

React "restricts" HTML by default—and that’s a feature, not a bug. When you write JSX, React automatically escapes strings to protect your application from Cross-Site Scripting (XSS). But what happens when you need to render rich text from a CMS or an external API? The Solution: dangerouslySetInnerHTML React provides a specific "escape hatch" for this: JavaScript <div dangerouslySetInnerHTML={{ __html: content }} /> The name is intentionally alarming. It’s a reminder that by using it, you are bypassing React's built-in security layer. The Risk: Unsafe Data ❌ Rendering raw HTML from an API without verification is a massive security liability. If that data contains a <script> tag or a malicious onerror attribute, your user's session could be compromised. The Standard: Sanitization ✅ "Safe" rendering requires sanitization. This means scrubbing the HTML to remove: <script> tags Inline event handlers (onclick, onload, etc.) Malicious <iframe> or <object> embeds 💡 Pro Tip: Never trust the raw input. Use a library like @DOMPurify on the client side or ensure your backend validates and cleans the HTML before it ever reaches your frontend. dangerouslySetInnerHTML isn't a "bad" practice; it’s a powerful tool that enables: ✔ Dynamic, CMS-driven interfaces ✔ Rich-text content rendering ✔ Unrivaled UI flexibility The takeaway? Good developers don’t just make things work — they make them safe. #ReactJS #WebSecurity #FrontendDevelopment #JavaScript #SoftwareEngineering #CodingBestPractices #React #WebDev #TechTips

Most developers think they understand Closures… until an interview question destroys their confidence. Here’s the truth 👇 Closures are not just a “concept” — they’re the reason JavaScript feels powerful. --- 🔒 So what is a Closure? A closure is when a function remembers variables from its outer scope even after that outer function is finished. --- 🧠 Simple Example: function outer() {   let count = 0;   return function inner() {     count++;     console.log(count);   }; } const counter = outer(); counter(); // 1 counter(); // 2 👉 Even though `outer()` is done, `inner()` still remembers `count`. That’s a Closure. --- 🔥 Why should you care? Closures are everywhere: ✔ React Hooks (useState, useEffect) ✔ Event handlers ✔ API calls ✔ Functional programming --- 💡 Real Power: Closures help you: • Create private variables • Build reusable functions • Manage state without global variables --- ⚠️ Common mistake: for (var i = 1; i <= 3; i++) {   setTimeout(() => console.log(i), 1000); } Output: `4 4 4` 😵 👉 Fix? Use `let` or closure --- 🎯 Interview Golden Line: A closure is a function that remembers its lexical scope even after the outer function has executed. --- 🚀 If you master closures: You stop memorizing JavaScript… and start understanding it. --- 💬 What confused you most about closures? Let’s discuss 👇 --- #JavaScript #Closures #WebDevelopment #Frontend #ReactJS #CodingInterview #100DaysOfCode

🧠 JavaScript Closures Explained Simply Closures are one of those concepts that seem confusing at first — but once you understand them, they become incredibly useful. Here’s a simple way I understand closures 👇 🔹 What is a Closure? A closure is when a function remembers variables from its outer scope, even after that outer function has finished executing. 🔹 Example function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 Even though outer() has finished running, the inner() function still has access to count. That’s a closure. 🔹 Why is this useful? Closures are commonly used for: ✅ Data encapsulation ✅ Creating private variables ✅ Maintaining state ✅ Function factories 🔹 Real-world example Think of things like: • counters • timers • caching functions Closures help retain values without exposing them globally. 💡 One thing I’ve learned: Understanding concepts like closures makes you better at writing clean and predictable JavaScript, not just using frameworks. Curious to hear from other developers 👇 Where have you used closures in your projects? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

React recap: 𝗨𝘀𝗶𝗻𝗴 𝗶𝗻𝗱𝗲𝘅 𝗮𝘀 𝗮 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗 𝘄𝗮𝘀 𝗺𝘆 𝗯𝗶𝗴𝗴𝗲𝘀𝘁 𝗺𝗶𝘀𝘁𝗮𝗸𝗲 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁. At first, it felt harmless. items.map((item, index) => ( <Component key={index} /> )) Everything worked… until it didn’t. Here’s what I learned the hard way: • When the list changes (add/remove/reorder), React gets confused • Components don’t re-render correctly • State sticks to the wrong items (this one is scary) • Bugs appear that make zero sense at first I spent hours debugging something that wasn’t even obvious. The real problem? Index is not a stable identity. So what should we do instead? ✔️ Use a unique ID from your data (database ID, UUID, etc.) ✔️ Generate stable IDs (not on every render) ✔️ Think of keys as identity, not position Bad: key={index} Good: key={item.id} Simple change. Massive difference. One small mistake can quietly break your entire UI logic. If you're using index as key — fix it before it fixes you. #React #Frontend #WebDevelopment #JavaScript #CodingLessons

𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝘃𝘀 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 JavaScript runs code in two ways. Synchronous code runs line by line. Each line waits for the previous one. Blocking is the risk. A long task freezes your page. Buttons stop working. Users leave. Asynchronous code is different. It starts a task and moves to the next line. It does not wait. Common async tasks: - Timers (setTimeout) - API calls (fetch) - User clicks This keeps your app responsive. The main thread stays free. How it works: - Call Stack: Runs sync code. - Web APIs: Manages long tasks. - Callback Queue: Holds finished async tasks. - Event Loop: Pushes tasks from the queue to the stack. The Event Loop moves a task only when the stack is empty. Compare the two: - Synchronous: Simple. Predictable. Blocks the thread. - Asynchronous: Fast. Non-blocking. Keeps apps smooth. JavaScript uses one thread. Async behavior is a necessity. It prevents screen freezes. Source: https://lnkd.in/gZVb7V9R

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

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

𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗜𝗺𝗽𝗹𝗶𝗰𝗮𝗍𝗶𝗼𝗻𝘀 𝗢𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 JavaScript closures can be tricky. They help you write better code, but they can also slow down your app if not used correctly. Here are some key things to know about closures: - They let functions use variables from their parent scope, even when the parent function is done running. - They are useful for hiding private data and methods. - They can cause memory leaks if not managed properly. To use closures well, you should: - Avoid making unnecessary closures. - Use tools to check how your code is using memory and performance. - Use weak references to help with memory management. Some common pitfalls to watch out for: - Scope confusion: make sure you understand how scope works in your code. - Memory leaks: be careful not to accidentally keep references to things you don't need anymore. - Performance issues: use tools to find and fix slow parts of your code. By understanding how closures work and how to use them well, you can write faster and more efficient JavaScript code. Source: https://lnkd.in/gm2iKHfM

Forced Synchronous Layout is one of those bugs that shows up as a long task in DevTools but is hard to pinpoint in the code. The pattern is deceptively simple: a class mutation followed immediately by a geometric property read (`scrollTop`, `getBoundingClientRect`…). The browser can't defer the layout — it recalculates right now, blocking the main thread. I've added a new snippet to WebPerf Snippets that detects it at runtime. Run it in DevTools, reproduce the interaction, and every FSL event gets logged with: - The property accessed and whether it was a read or write - The element descriptor (tagName + id/class) - Milliseconds since the last mutation - Full stack trace to locate the offending code One thing I had to work out while building it: MutationObserver fires asynchronously, so it can't catch mutations and geometric reads in the same synchronous block. The fix was intercepting `classList`, `setAttribute`, `setProperty`, and `cssText` directly at the prototype level, synchronously. Call `getFSLSummary()` for an aggregated report by property and element. Call `stopFSLDetector()` to restore all prototypes when you're done. https://lnkd.in/dhNciS5B #WebPerf #Performance #JavaScript #FrontEnd #WebPerfSnippets

The JavaScript module pattern — properly explained. Not just "use export and import." But: → Why global scope is a battlefield → How closures create privacy → What the browser does before running a single line of your module → Why modules never block your page → And where even ES Modules fall short Deep-dive guide is live. Link below. #JavaScript #WebDevelopment #Frontend