Lodash, Day.js in Browser Console: A Debugging Shortcut

Your component unmounted. But your timer didn't. This is one of the most common memory leaks in React — and it leaves zero errors in the console. Here's what's happening: 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: useEffect(() => {  const id = setInterval(() => {   console.log('still running...');   setData(fetch()); // setting state on unmounted component  }, 1000); }, []); User navigates away. Component unmounts. But the interval is still alive in memory. Still firing. Still trying to update state that no longer exists. React will warn you: "Can't perform a React state update on an unmounted component" But by then — the leak already happened. 𝗪𝗶𝘁𝗵 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: useEffect(() => {  const id = setInterval(() => {   console.log('running...');  }, 1000);  return () => clearInterval(id); // 👈 this is the cleanup }, []); The function you return from useEffect runs in two situations: → Before the effect runs again (dependency changed) → When the component unmounts Think of it as a paired contract: You start something → you are responsible for stopping it. 𝗧𝗵𝗿𝗲𝗲 𝘁𝗵𝗶𝗻𝗴𝘀 𝘁𝗵𝗮𝘁 𝗮𝗹𝘄𝗮𝘆𝘀 𝗻𝗲𝗲𝗱 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: → setInterval / setTimeout → Event listeners (window.addEventListener) → WebSocket or API subscriptions If you start it in useEffect — you clean it up in the return. No exceptions. Have you ever shipped a memory leak from a missing cleanup? 👇 #ReactJS #JavaScript #WebDevelopment #Frontend #useEffect #LearnInPublic #SoftwareEngineering #TypeScript #Programming

Ever tried debugging a production error… and saw this? 💁🏻 Error at t (index-ABC123.js:1:847) 🤔 No file name. No real function. Just confusion. 🤯 This happens because during build (Vite, Webpack, etc.), your code is: 🔹 Minified → variables renamed to single letters 🔹 Bundled → hundreds of files merged into a few So the browser runs optimized code — not your original source. That’s where sourcemaps come in. A sourcemap is like a translator. It maps: “line 1, column 847 in bundled file” → back to “DashBoard.jsx line 23” So instead of guessing, you see the actual file and function name. Most tools and browsers use this automatically, and tools like Sentry rely on it to show readable error traces. But there’s a trade-off: 👉🏻 Extra build time 👉🏻 Higher memory usage 👉🏻 Additional files in your build That’s why different environments use different strategies: ◾️ No sourcemap → faster builds ◾️ Full sourcemap → easier debugging ◾️ Hidden sourcemap → debugging via tools, not browser Sourcemaps are invisible in your UI — but they make debugging possible. Have you ever debugged a production issue without sourcemaps? 😅 #frontend #vite #javascript #webperformance #learninginpublic

Ever wondered why this prints in a different order? console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Output: Start End Timeout Wait… timeout is 0ms, right? So why does it run last? ⸻ 🧠 Welcome to the Event Loop JavaScript is single-threaded, but it handles async tasks using: 👉 Call Stack 👉 Web APIs 👉 Callback Queue 👉 Event Loop ⸻ ⚙️ What’s happening behind the scenes? 1️⃣ "Start" → goes to Call Stack → executed 2️⃣ setTimeout → sent to Web APIs 3️⃣ "End" → executed immediately 4️⃣ Callback enters queue 5️⃣ Event Loop pushes it back to stack 👉 That’s why "Timeout" runs last ⸻ 🔥 Key Insight: setTimeout(fn, 0) does NOT mean “run immediately” It means → “run after current execution is done” ⸻ 💬 Lesson learned: JavaScript isn’t just about syntax… It’s about understanding how it executes code ⸻ #JavaScript #WebDevelopment #Frontend #EventLoop #AsyncJavaScript #CodingJourney

Shipped something small but genuinely useful for my day-to-day dev workflow 👇 I got tired of the same loop: write → save → switch tabs → tweak → repeat… (you know the one) So I built a way to skip most of it. Introducing maptiveui-tunable — a dev-only React component that lets you live-edit styles directly in the browser. Wrap any element, hover it, click the ◆ badge, and a floating panel opens where you can: • Adjust spacing, colors, shadows, etc. with sliders • Use a full HSV picker (with alpha + eyedropper) • Undo/redo changes with keyboard shortcuts • Drag/resize the panel freely When you're done: → Copy the CSS or Tailwind classes → Paste back into your code → Move on No more constant tab-switching for tiny tweaks. What it’s NOT: • Not a page builder • Not a design system • Not shipped to users (dev-only via NODE_ENV) What I like about it so far: • ~10 kB gzipped • Smart style mapping (e.g. realistic shadows, glow effects) • Tailwind export with arbitrary values fallback • persistKey support (saves tweaks in localStorage) If you're building UIs in React, this might save you a lot of micro-friction. Try it: npm i -D maptiveui-tunable GitHub: https://lnkd.in/dbpDV8uG Docs & demo: https://maptivaui.dev/ MIT licensed. Still early (v0.1), but actively improving — feedback and PRs are welcome. #React #WebDev #OpenSource #Frontend #DeveloperTools #TailwindCSS #JavaScript #TypeScript #IndieHacker

𝐄𝐱𝐭 𝐉𝐒 𝟖.𝟎 𝐚𝐝𝐝𝐬 𝐜𝐚𝐩𝐚𝐛𝐢𝐥𝐢𝐭𝐢𝐞𝐬 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐩𝐫𝐞𝐯𝐢𝐨𝐮𝐬𝐥𝐲 𝐡𝐚𝐝 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝 𝐭𝐡𝐞𝐦𝐬𝐞𝐥𝐯𝐞𝐬. Here's the full picture. 👉 This release covers both the Modern and Classic toolkits with targeted improvements across four categories: Core additions that work across both toolkits: → Digital Signature component → QR Code Reader & Generator → Font Awesome 7 as default → Updated ECMAScript compiler support Modern toolkit upgrades: → Lockable Grid plugin → Horizontal Buffered Rendering → Dialog Boundary Control → Improved ARIA support Classic toolkit: → Tri-State TreePanel Checkboxes Swipe through for each one in detail. 𝐓𝐫𝐲 𝐄𝐱𝐭 𝐉𝐒 𝐅𝐫𝐞𝐞 𝐟𝐨𝐫 𝟑𝟎 𝐃𝐚𝐲𝐬 👇 https://lnkd.in/gK8FhY_h #ExtJS #JavaScript #FrontendEngineering #WebDevelopment #EnterpriseUI

I shipped a React dashboard with 40+ memoized components. The profiler was embarrassing. Here's what I found. Every component was wrapped in React.memo. Every callback was in useCallback. Every derived value was in useMemo. I thought I was being a good engineer. 𝗧𝗵𝗲 𝗽𝗿𝗼𝗳𝗶𝗹𝗲𝗿 𝘁𝗼𝗹𝗱 𝗮 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝘀𝘁𝗼𝗿𝘆: → 200+ unnecessary renders per interaction → Memory allocation spiking on every keystroke → Frames dropping below 60fps during filter operations The irony? The memoization itself was causing the slowdown. Unstable object references being passed as deps. useCallback wrapping functions that didn't need stability. React.memo on components that rendered in 0.1ms anyway. Every "optimization" was a small tax. 40 components. Multiplied. I spent a day removing memo. Performance improved immediately. The lesson I took away: 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗽𝗿𝗼𝗳𝗶𝗹𝗶𝗻𝗴 𝗶𝘀 𝗴𝘂𝗲𝘀𝘀𝗶𝗻𝗴. 𝗔𝗻𝗱 𝗰𝗼𝗻𝗳𝗶𝗱𝗲𝗻𝘁 𝗴𝘂𝗲𝘀𝘀𝗶𝗻𝗴 𝗶𝘀 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗱𝗮𝗻𝗴𝗲𝗿𝗼𝘂𝘀 𝗸𝗶𝗻𝗱. Profile first. Memoize second. Only what the profiler tells you to. What React "best practice" did you have to unlearn? #React #Frontend #JavaScript #WebPerformance #SoftwareEngineering

Zustand vs Redux: Choosing the Right State Management for React Compare Zustand vs Redux for React state management. Learn differences, performance, scalability, and when to use each in real projects. #PeakIQ #React #State management #Zustand #Javascript

#js #9 **What Is V8 Engine, How It Works** 🧠 What is V8 Engine? 👉 V8 is a JavaScript engine developed by Google. 👉 It is used in: Google Chrome Node.js 👉 Simple definition: V8 is the engine that runs your JavaScript code. 🚗 Real-life analogy Think of: JavaScript = fuel ⛽ V8 = engine 🚗 Browser = car 👉 Without engine, car won’t run 👉 Without V8, JS won’t run ⚙️ How V8 Works (Step-by-Step) Let’s go step by step 👇 🟢 Step 1: You write JavaScript let x = 10 + 20; console.log(x); 🟡 Step 2: Parsing 👉 V8 reads your code and converts it into AST (Abstract Syntax Tree) 🔵 Step 3: Compilation (JIT) Here’s the special part: 👉 V8 uses JIT (Just-In-Time compilation) Concept: Just-In-Time Compilation 👉 It converts JS into machine code directly ✔ No interpreter-only model ✔ Faster execution 🔴 Step 4: Execution Machine code runs directly on CPU Very fast ⚡ 🔥 Important Components of V8 1. Ignition (Interpreter) 👉 First stage: Quickly converts code into bytecode Starts execution fast 2. TurboFan (Compiler) 👉 Optimization stage: Converts frequently used code into highly optimized machine code ✔ Makes app faster over time 3. Garbage Collector 👉 Automatically removes unused memory Example: let obj = { name: "JS" }; obj = null; 👉 Memory gets cleaned automatically ✅ 🔄 Full Flow JavaScript Code ↓ Parsing (AST) ↓ Ignition (Bytecode) ↓ TurboFan (Optimized Machine Code) ↓ Execution 🚀 ⚡ Why V8 is fast? JIT compilation Optimized machine code Smart memory management 🎯 Why V8 matters for you Even if you’re learning React: 👉 Everything runs on V8: Your JS logic React code Async operations 🧾 Final Summary V8 is a JavaScript engine by Google It runs JS in Chrome & Node.js Uses: Parsing (AST) JIT compilation Optimization (TurboFan) Converts JS → machine code → fast execution 💡 One-line takeaway 👉V8 takes your JavaScript code and converts it into fast machine code so it can run efficiently on your system. #Javascript #ObjectOrientedProgramming #SoftwareDevelopment

I fixed a like button bug today that looked simple… but wasn’t. Clicks were working… But likes were not updating correctly. The issue? State was not syncing with the backend response. Once I fixed the state update logic, everything worked perfectly. Lesson: • Always sync frontend state with backend data • Don’t rely only on UI changes Small feature. Real learning. What bug did you fix recently? #FullStackDeveloper #WebDevelopment #JavaScript #Debugging #ProblemSolving