React SyntheticEvent Explained

Why does your 'ref' return 'null' the moment you wrap your input in a custom component? It is one of those React quirks that trips up even experienced developers. By default, refs do not behave like props. They are treated as special instances that stop at the component boundary to protect encapsulation. This is exactly why we need 'forwardRef'. It acts as a bridge that allows a parent component to reach through a child and grab a direct handle on an internal DOM node. The most practical application is building a reusable UI library. If you create a custom 'Input' or 'Button' component, your parent component might need to call '.focus()' or '.scrollIntoView()'. Without 'forwardRef', your parent is just holding a reference to a React internal object, not the actual HTML element. Another real-world scenario involves Higher-Order Components (HOCs). If you wrap a component with a 'withAnalytics' or 'withTheme' wrapper, that wrapper will 'swallow' the ref by default. By using 'forwardRef' in your HOC implementation, you ensure the reference passes through the wrapper and lands on the component that actually needs it. It is about making your abstractions transparent and ensuring that the parent component maintains the control it expects over the physical DOM. Using this pattern sparingly is key. It is an escape hatch for those moments where declarative state isn't enough to manage physical browser behavior. It keeps your component interfaces clean while providing the necessary access for specialized UI interactions. #ReactJS #SoftwareEngineering #Frontend #WebDevelopment #Javascript #CodingTips #CodingBestPractices

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

The browser does not garbage collect detached DOM nodes if a JavaScript reference holds them alive. Removing a node from the DOM does not free its memory. If any JavaScript variable, closure, or event listener holds a reference to that node or any of its descendants, the entire detached subtree stays in the heap. The garbage collector cannot reclaim it because the reference graph still reaches it. This is the mechanism behind one of the most persistent memory leaks in long-lived single-page applications. A component unmounts, React removes its DOM output, but a third-party library, a global event listener, or a module-level cache still holds a reference to a node that was part of that component's tree. The memory never returns to the pool. The failure mode compounds in applications with frequent route transitions. Each navigation accumulates another detached subtree in memory. The heap grows monotonically. Users on low-memory devices hit the browser's memory ceiling after twenty minutes of use. The profiler shows a sawtooth pattern that never returns to baseline between GC cycles. Diagnosing this requires the Memory panel in DevTools, not the Performance panel. Take a heap snapshot before and after unmounting a known-heavy component. Filter by "Detached" in the snapshot. Any detached HTMLElement with a retained size greater than zero has a live reference path. The retainer tree shows exactly which object is keeping it alive. The fix is explicit cleanup: remove event listeners in useEffect return functions, null out references in destroy callbacks, and audit any library that stores DOM references internally. What is the most unexpected retainer path you have found holding a detached subtree alive in a production heap snapshot? #javascript #performance #frontend

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

Why does your page refresh the moment you hit submit? It is the browser's old-school behavior. In the pre-SPA era, browsers were designed to reload and send data to a server after a form submission. But in React, we handle that logic ourselves using state and APIs. This is where 'event.preventDefault()' comes in. By calling it in your 'onSubmit' handler, you tell the browser to stop that default reload. It allows your JavaScript to process the data, show a loading spinner, or update the UI without the user ever losing their place. It is the key to keeping your application feeling like a fast, seamless experience. It is not just for forms. You might use it on anchor tags to stop navigation when a link acts as a button, or on 'onContextMenu' to replace the standard right-click menu with a custom one. It is all about taking full ownership of the user experience and ensuring the browser doesn't step on your toes. #ReactJS #WebDevelopment #SoftwareEngineering #Javascript #Frontend #CodingTips

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

🧠 Why map() in React Needs a key (Beyond Just a Warning) Most developers know this warning: “Each child in a list should have a unique key” So they do this 👇 {items.map((item, index) => ( <li key={index}>{item}</li> ))} Warning gone ✅ Problem solved ❌ 🔍 What actually happens? React uses key to track elements between renders. If you use index: 👉 React assumes position = identity ⚠️ The hidden bug const items = ["A", "B", "C"]; Now remove "A". New list: ["B", "C"] With index as key: "B" becomes index 0 React thinks it’s still "A" 👉 UI can behave incorrectly 👉 State can get mixed up ✅ Correct approach {items.map(item => ( <li key={item.id}>{item.name}</li> ))} 👉 Use a stable, unique key 🎯 Real Insight key is not for React warnings. It’s for correct UI behavior. 💥 Senior-level understanding Bad keys don’t always break immediately. They break when: Items reorder Items are removed State is attached to elements That’s why bugs feel random. #ReactJS #FrontendDevelopment #JavaScript #CleanCode #WebDevelopment #CodingTips #LearningInPublic

Your component is re-rendered... Then what? Most developers stop thinking here. And that’s where the real magic starts. This is Post 3 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. React does NOT update the DOM immediately. Because touching the DOM is expensive. Instead, it follows a 3-step process: Render → Diff → Commit First, React creates something called a 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠. Not the real DOM. Just a JavaScript object in memory. A blueprint of your UI. Every time your component runs, React builds a new tree of this Virtual DOM. And it already has the previous tree stored. Now comes the interesting part. React compares: Old tree vs New tree This step is called 𝗗𝗶𝗳𝗳𝗶𝗻𝗴. It finds exactly what changed. Not everything. Just the difference. Then comes the final step: 𝗖𝗼𝗺𝗺𝗶𝘁 phase React takes only those changes… …and updates the real browser DOM So no, React is NOT re-rendering your whole page. It’s doing surgical updates. The key insight: React separates thinking from doing. Thinking = Render + Diff Doing = Commit That’s why React is fast. Because touching the DOM is expensive. So React minimizes it. Flow looks like this: ✅️ Component runs ✅️ Virtual DOM created ✅️ Changes calculated ✅️ DOM updated ✅️ Browser paints UI Once you see this, you stop fearing re-renders. And start understanding them. In Post 4 of React Under the Hood: How does React actually compare trees? (The diffing algorithm 👀) Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read in detail here: https://lnkd.in/dTYAbM6n #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

🚀 Understanding Event Handling in React — Simplified! In React, user interactions drive everything. 👉 Clicking a button 👉 Typing in input 👉 Submitting a form All of this is handled through events. 💡 What is Event Handling in React? Event handling allows you to respond to user actions using functions. <button onClick={handleClick}>Click Me</button> 👉 When clicked → handleClick runs ⚙️ How it works function App() { const handleClick = () => { console.log("Button clicked!"); }; return <button onClick={handleClick}>Click</button>; } ✅ Pass function reference (not function call) ✅ React handles binding automatically 🧠 Key Differences from HTML 🔹 HTML: <button onclick="handleClick()">Click</button> 🔹 React: <button onClick={handleClick}>Click</button> 👉 CamelCase events 👉 Pass functions, not strings 🧩 Common Events in React ✔ onClick → Button click ✔ onChange → Input change ✔ onSubmit → Form submit ✔ onMouseEnter / onMouseLeave ✔ onKeyDown / onKeyUp 🔥 Best Practices (Most developers miss this!) ✅ Always pass function reference ✅ Use arrow functions when needed ✅ Keep handlers clean and reusable ❌ Don’t call function directly in JSX ⚠️ Common Mistake // ❌ Wrong <button onClick={handleClick()}> 👉 This runs immediately instead of on click 💬 Pro Insight React uses a Synthetic Event system: 👉 Normalizes events across all browsers 👉 Improves performance and consistency 📌 Save this post & follow for more deep frontend insights! 📅 Day 9/100 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

After getting comfortable with JavaScript fundamentals, I moved to working with the browser. Part that makes websites actually feel alive , the DOM and browser APIs. This is where things became more practical. I explored: ▸ DOM Manipulation — traversing the page as a tree and dynamically updating elements, attributes, and styles with JS ▸ Events & Event Handling — capturing clicks, keyboard inputs, and user interactions to build truly responsive UIs ▸ Forms & Validation — handling input fields, text areas, and select boxes, with validation logic to keep data clean ▸ Timers & Intervals — managing delayed executions and repetitive actions using setTimeout and setInterval ▸ Data Storage — persisting user data across sessions with localStorage, sessionStorage, and cookies Along the way, I built a few mini projects to apply these concepts. There's a massive difference between understanding a concept and building with it. The projects made everything click. This phase felt different from just learning syntax. It was more about connecting logic to actual user interaction. #JavaScript #WebDevelopment #DOM #LearningInPublic #Frontend