🤔𝗪𝗵𝘆 𝗱𝗼𝗲𝘀 𝗮 𝗽𝗮𝗿𝗲𝗻𝘁 𝗲𝗹𝗲𝗺𝗲𝗻𝘁 𝗿𝗲𝗮𝗰𝘁 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝗼𝗻𝗹𝘆 𝗰𝗹𝗶𝗰𝗸𝗲𝗱 𝘁𝗵𝗲 𝗰𝗵𝗶𝗹𝗱? No duplicate listeners. No unexpected code. 👉 Is there any Bug? 👉 Or JavaScript working exactly as designed? That's due to concept of 𝗘𝘃𝗲𝗻𝘁 𝗕𝘂𝗯𝗯𝗹𝗶𝗻𝗴 & 𝗘𝘃𝗲𝗻𝘁 𝗖𝗮𝗽𝘁𝘂𝗿𝗶𝗻𝗴. 🚀 𝗘𝘃𝗲𝗻𝘁 𝗕𝘂𝗯𝗯𝗹𝗶𝗻𝗴 & 𝗘𝘃𝗲𝗻𝘁 𝗖𝗮𝗽𝘁𝘂𝗿𝗶𝗻𝗴 Every DOM event follows a 3-phase lifecycle: • 𝗖𝗮𝗽𝘁𝘂𝗿𝗶𝗻𝗴 𝗣𝗵𝗮𝘀𝗲 → Event travels from 𝘸𝘪𝘯𝘥𝘰𝘸 → 𝘵𝘢𝘳𝘨𝘦𝘵 • 𝗧𝗮𝗿𝗴𝗲𝘁 𝗣𝗵𝗮𝘀𝗲 → Event reaches the clicked element • 𝗕𝘂𝗯𝗯𝗹𝗶𝗻𝗴 𝗣𝗵𝗮𝘀𝗲 (𝗱𝗲𝗳𝗮𝘂𝗹𝘁) → Event bubbles back 𝘵𝘢𝘳𝘨𝘦𝘵 → 𝘸𝘪𝘯𝘥𝘰𝘸 𝟭. 𝗘𝘃𝗲𝗻𝘁 𝗕𝘂𝗯𝗯𝗹𝗶𝗻𝗴 (𝗗𝗲𝗳𝗮𝘂𝗹𝘁 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿) • Event starts from the 𝗰𝗵𝗶𝗹𝗱 𝗲𝗹𝗲𝗺𝗲𝗻𝘁 • Then moves 𝘂𝗽𝘄𝗮𝗿𝗱𝘀 𝘁𝗼 𝗽𝗮𝗿𝗲𝗻𝘁 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 📌 Example output when clicking button: • Child Clicked • Parent Clicked 👉 This is why parent handlers get triggered automatically 𝟮. 𝗘𝘃𝗲𝗻𝘁 𝗖𝗮𝗽𝘁𝘂𝗿𝗶𝗻𝗴  • Event starts from the 𝗼𝘂𝘁𝗲𝗿𝗺𝗼𝘀𝘁 𝗲𝗹𝗲𝗺𝗲𝗻𝘁 (𝘄𝗶𝗻𝗱𝗼𝘄) • Travels 𝗱𝗼𝘄𝗻 𝘁𝗼 𝘁𝗵𝗲 𝘁𝗮𝗿𝗴𝗲𝘁 𝗲𝗹𝗲𝗺𝗲𝗻𝘁 👉 Enabled using: addEventListener('click', handler, true) 📌 Example output: • Parent Clicked (Capturing) • Child Clicked 𝟯. 𝗛𝗼𝘄 𝘁𝗼 𝗦𝘁𝗼𝗽 𝗜𝘁 (𝗩𝗲𝗿𝘆 𝗨𝘀𝗲𝗳𝘂𝗹 𝗶𝗻 𝗥𝗲𝗮𝗹 𝗔𝗽𝗽𝘀) Sometimes you DON’T want parent logic to run. 👉 Use: 𝘦𝘷𝘦𝘯𝘵.𝘴𝘵𝘰𝘱𝘗𝘳𝘰𝘱𝘢𝘨𝘢𝘵𝘪𝘰𝘯() 📌 Result: • Only child handler runs • Parent never receives the event 𝗥𝗲𝗮𝗹 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗜𝗻𝘀𝗶𝗴𝗵𝘁 • Bubbling is powerful for 𝗲𝘃𝗲𝗻𝘁 𝗱𝗲𝗹𝗲𝗴𝗮𝘁𝗶𝗼𝗻 • Capturing is useful for 𝗮𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 • Misunderstanding this → leads to 𝘂𝗻𝗲𝘅𝗽𝗲𝗰𝘁𝗲𝗱 𝗯𝘂𝗴𝘀 𝗙𝗶𝗻𝗮𝗹 𝗧𝗵𝗼𝘂𝗴𝗵𝘁 When multiple events fire… 👉 It’s not randomness 👉 It’s the event flow doing its job Master this → you debug UI issues 10x faster. #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #Hiring #TechCareers #AI #CodingTips #100DaysOfCode #LearnJavaScript #LearnInPublic #JavaScriptMastery

You click a button in the parent… But you want to control something inside the child 😐 Like: Focus an input Reset a form Open a modal And suddenly… you’re stuck. 🤔 The Problem React works in a clean way: Parent → passes data Child → sends events back But sometimes you need direct control over a child component. Using props for this: Adds unnecessary state Makes logic confusing Feels like overengineering 💡 The Solution: useImperativeHandle useImperativeHandle lets the child expose specific functions to the parent using ref. So instead of forcing everything through props… you give controlled access where needed. ⚙️ How It Works Parent creates a ref Passes it with forwardRef Child decides what to expose 🧠 Example import { forwardRef, useImperativeHandle, useRef } from "react"; const Input = forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} />; }); export default Input; Now parent can do: inputRef.current.focus(); 🚀 When to Use It? Input focus control Modals / dropdowns Animations Third-party libraries ⚠️ Rule Don’t use it everywhere. Only when props start making things messy. 🧩 Final Thought React is declarative… But sometimes, a little direct control makes life easier. Have you ever faced this situation? 😄 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks #useImperativeHandle #SoftwareDevelopment #CodingTips #LearnToCode #ReactDevelopers #MERNStack #FrontendEngineer #DevCommunity #Programming #CleanCode #CodeNewbie #BuildInPublic #TechContent #DevelopersLife #UIEngineering

I Built My Own React Practice Lab 🚀 I spent the last few months doing something different: moving from "Writing Code" to truly understanding state. Most tutorials show you the result. Mine shows you the mechanics. What I Built: → A custom State Watcher that visualizes how state flows in real-time → A Registry System to isolate and master every complex React pattern → 10+ interactive demos covering everything from useEffect to Redux What You Get: ✅ Core Fundamentals (Props, Mapping, Component Architecture) ✅ Hooks Mastery (useEffect, useMemo, useRef, and more) ✅ Global State (Redux Toolkit, RTK Query, Auth patterns) ✅ Advanced Routing (React Router 6.4+ with Data Loaders & Nested Routes) This lab is the interactive engine behind my React Learning Portal—built to make the "hard parts" visible and intuitive. Know someone stuck on React? Share this with them. What React concept gave you the most trouble? Drop it in the comments 👇 🔗 Try the Live Lab: https://lnkd.in/dJ5X--4u 📖 Explore the Hub: https://lnkd.in/dkMYXNrh #ReactJS #WebDevelopment #Frontend #Redux #LearningByDoing #React #Saylani #SMIT

VS Code 1.117 just dropped and it's 🔥 — BYOK lets you plug in your own OpenRouter or Ollama keys directly in VS Code, incremental chat rendering makes AI responses feel way smoother, and terminal tabs finally show "Claude Code" instead of just "node". Small changes, real impact. 💡 Read the full breakdown on hamidrazadev.com → link in bio! #vscode #webdev #copilotai #javascript #developers #claudecode #openrouter #techblog #productivityhacks #hamidrazadev

🚀 Understanding the Event Loop in Node.js — The Heart of Asynchronous Magic If you’ve ever wondered how Node.js handles thousands of requests without breaking a sweat, the answer lies in its Event Loop 🔁 At its core, Node.js operates on a single-threaded, non-blocking I/O model. But how does it manage multiple operations at once? That’s where the event loop comes in. 👉 What is the Event Loop? It’s a mechanism that continuously checks the call stack and the callback queue. If the call stack is empty, it pushes queued callbacks into the stack for execution. 👉 Key Phases of the Event Loop: Timers – Executes callbacks scheduled by setTimeout() and setInterval() I/O Callbacks – Handles system-level callbacks Idle, Prepare – Internal use Poll Phase – Retrieves new I/O events Check Phase – Executes setImmediate() callbacks Close Callbacks – Handles closing events (e.g., sockets) 👉 Why it matters: ✔ Efficient handling of concurrent requests ✔ No thread blocking = better scalability ✔ Perfect for real-time apps like chat, streaming, APIs 💡 Pro Tip: Understanding the difference between setTimeout, setImmediate, and process.nextTick() can level up your async programming game. Node.js may be single-threaded, but with the event loop, it behaves like a multitasking powerhouse 💪 #NodeJS #JavaScript #BackendDevelopment #EventLoop #AsyncProgramming #WebDevelopment

🚨 My Brain Late at Night: Can I use useMemo instead of React.memo? Ever had those random dev thoughts hit you right when you're about to sleep? Yeah… this was mine 👇 I caught myself wondering: 👉 “Can I just use `useMemo` instead of `React.memo` to memoize a component?” At first, it almost made sense… `React.memo` → prevents re-renders unless props change ✅ `useMemo` → caches expensive computations inside a component ✅ So my brain goes: 💡 “Hey, I can just wrap my component logic in `useMemo` with a dependency array and control re-renders too!” Sounds clever… but nope ❌ Here’s the reality check I gave myself: 🔹 `React.memo` is built for component-level memoization → It works with React’s lifecycle and rendering behavior 🔹 `useMemo` is for caching expensive calculations → Not for controlling when a component should render 🔹 Trying to replace one with the other = 👉 Manually managing lifecycle (which React already does better) And that’s where I paused and told my brain: 🧠 “Stop. Don’t fight React. Let React do its job.” Because honestly… hacking render logic = 🚫 bad patterns 💭 Lesson: > Don’t outsmart React late at night. You’ll just confuse yourself. 😂 Curious though… 👉 What’s the weirdest dev thought your brain has thrown at you? #React #JavaScript #Frontend #AdvancedReact #ReactHooks #WebDevelopment #SoftwareEngineering #CodingLife #DevThoughts #useMemo #ReactMemo

I've always believed a portfolio should show how you think, not just what you've built. So I built mine as a terminal. It's live now. 🎯 dhrumilamin.me But it's not a portfolio in the usual sense. It's a terminal. Type a command → get my story. Click a chip → same thing, no typing needed. Toggle 3D mode → watch a skill constellation render in real-time via Three.js. Built dual-mode on purpose: → Recruiters skim in 30 seconds via clickable chips → Engineers dig for 2–3 minutes in the actual CLI Under the hood: • Next.js 16 (App Router) + TypeScript • React Three Fiber for the 3D layer — lazy loaded, zero bundle cost until you ask for it • FPS monitor that auto-disables 3D if your device struggles • Levenshtein typo correction on the command parser (yes, really) • GSAP micro-interactions, Zustand state, full keyboard nav + ARIA Would love to hear reviews about this thought. As a user myself, I build without heavy abstractions and I care about how things feel, not just how they work. If you're building something interesting in AI, fintech, or developer tooling — I'd love to talk. 🔗 dhrumilamin.me #Portfolio #FullStackDeveloper #NextJS #ThreeJS #BuildInPublic #CSEStudent #Claude #Coding

React Rule at Factory: No direct useEffect allowed They banned calling useEffect directly in the codebase. For the rare cases needing external sync on mount, they use a single explicit hook: useMountEffect(). Why? Most useEffect usage was creating: Infinite loops Race conditions Hidden dependency hell Flaky refactors Debugging pain (“why did this run?”) This is even more critical now that AI agents are writing frontend code and often add “just-in-case” effects. The team replaced most effects with these 5 clean patterns: Derive state — don’t sync it with effects Use proper data-fetching libraries — no manual fetch + setState Event handlers — not effect flags useMountEffect — only for true external sync (DOM, third-party widgets) Reset with React keys — instead of effect choreography Result: Fewer bugs, easier reasoning, faster onboarding, and a more predictable codebase. It started as a strict rule born from production pain — now it feels like an essential guardrail. Would you adopt a “no direct useEffect” rule on your team? Thoughts? Too extreme or smart discipline? Drop your take below #React #ReactJS #Frontend #WebDevelopment #JavaScript #CleanCode #SoftwareEngineering

🚀 𝗗𝗲𝗰𝗼𝗱𝗲 𝗠𝗘𝗥𝗡 𝘄𝗶𝘁𝗵 𝗠𝗲 – 𝗗𝗮𝘆 𝟮 𝗕𝗮𝘀𝗶𝗰𝘀 𝗮𝗿𝗲𝗻’𝘁 𝗯𝗮𝘀𝗶𝗰… 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴. Yesterday was about 𝗣𝗿𝗼𝗽𝘀. Today, I explored the real power behind React — 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 Instead of just learning syntax, I built multiple mini apps to understand how 𝘀𝘁𝗮𝘁𝗲 behaves in real scenarios. 📍 𝗪𝗵𝗮𝘁 𝗜 𝗯𝘂𝗶𝗹𝘁: • 𝗖𝗼𝘂𝗻𝘁𝗲𝗿 𝗔𝗽𝗽 (increment/decrement logic) • 𝗧𝗼𝗴𝗴𝗹𝗲 𝗕𝘂𝘁𝘁𝗼𝗻 (boolean state handling) • 𝗦𝗵𝗼𝘄/𝗛𝗶𝗱𝗲 𝗧𝗲𝘅𝘁 (conditional rendering) • 𝗣𝗮𝘀𝘀𝘄𝗼𝗿𝗱 𝗜𝗻𝗽𝘂𝘁 (visibility toggle) • 𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗜𝗻𝗽𝘂𝘁 (form state management) • 𝗧𝗼𝗱𝗼 𝗟𝗶𝘀𝘁 (real-world state usage) 💡 𝗞𝗲𝘆 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀: • 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 for managing dynamic UI • State changes trigger 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 • Handling input using 𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 • 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝗮𝗹 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 • Managing 𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝗲 𝘀𝘁𝗮𝘁𝗲𝘀 🌗 𝗕𝗼𝗻𝘂𝘀: 𝗗𝗮𝗿𝗸 𝗠𝗼𝗱𝗲 • Theme toggle using state • Saved preference with 𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 is not just a hook — it makes UI feel alive. 🔗 GitHub: https://lnkd.in/g39YNFQx Let’s grow together 🤝 #MERN #ReactJS #WebDevelopment #LearningInPublic #100DaysOfCode

🛠 I realized something while building my tRPC + Next.js + Inngest project: Seeing AI output is not enough. You need to inspect it. Until now, my app could show results — but there was no way to actually explore the generated code. So I built a file explorer + code preview system: 📁 Navigate project files with a proper tree + breadcrumbs 🧾 Read code with syntax highlighting (Prism.js) 🔀 Switch between live demo and source code 📋 Copy snippets instantly This changed the experience from: “Looks good” → “I understand how it works” One interesting takeaway: Building the file tree made me use DFS to transform flat file data into a hierarchical structure for the UI. That’s something I used to associate only with DSA interviews — but it shows up directly in real product code too (even in frontend machine coding rounds). Going to revisit this part and simplify the implementation further. 🔗Code: https://lnkd.in/g8CjMT7P #NextJS #tRPC #Inngest #FullStackDevelopment #FrontendDevelopment #BuildInPublic