Mahesh Senapathi’s Post

Unpopular opinion: that useCallback you wrote "just to be safe" is probably not doing what you think it is. I've been poking around a few codebases lately, and I keep finding the same thing — layers of manual memoization added with good intentions, slowly becoming a trap. Stale closures, wrong deps arrays, functions re-created on every render anyway because someone upstream changed something. Classic. And look, I was doing the exact same thing when I started. Wrapping everything in useCallback felt responsible. Turns out it just felt that way. Here's the thing: React Compiler has been stable for a while now. It figures out memoization at build time, and honestly? It's better at it than most of us are. It doesn't get lazy on a Friday afternoon and forget to update the deps array. The before/after is kind of humbling — same component, same behavior, about half the code. Check out the snippet below. I still write useMemo by hand when I'm doing something actually expensive — big data transforms, heavy sorts, that kind of thing. But wrapping every callback "just in case"? I've made peace with letting the compiler handle that. If you're on React 19 and haven't flipped the switch yet, you're writing more code to get worse results. That's a rough deal. What's the first thing you deleted after enabling React Compiler? I'm curious if anyone else had that "wait, this whole file?" moment. #React #Frontend #WebDev #TypeScript #ReactCompiler

Most JavaScript performance discussions stay at the surface. This one goes deeper. Part 3 of V8 hot code paths. I explored how type stability impacts JIT optimization in modern JS engines. When a function consistently receives the same data types (monomorphic state), the engine generates highly optimized machine code. The moment you introduce mixed types (megamorphic state), those optimizations break down—leading to deoptimizations and fallback to slower generic execution. A simple benchmark showed the impact clearly: Stable types: ~8.6 ms Mixed types: ~37.9 ms Same logic. Same code. ~4x difference—purely due to type consistency. If you care about performance, this is not a micro-optimization. It’s fundamental. Full breakdown and code in the blog. https://lnkd.in/gksMjv_g #JavaScript #WebPerformance #V8 #JIT #Programming #SoftwareEngineering #CleanCode #PerformanceOptimization #Developers #Coding #TechWriting #Backend #Frontend #JavaScriptEngine

🚨 React just made one of your most-used hooks obsolete. The new React Compiler (previously "React Forget") automatically memoizes your components and values behind the scenes — meaning useMemo() and useCallback() may soon be relics of the past. Here's what's changing: Previously, developers manually wrapped expensive calculations in useMemo() and functions in useCallback() to prevent unnecessary re-renders. It worked — but it cluttered codebases and introduced human error. The React Compiler analyzes your code at build time and applies memoization automatically, only re-rendering what actually changed. No manual intervention needed. What does this mean for you? → Cleaner, more readable components → Fewer performance bugs from forgotten hooks → Less boilerplate, more focus on actual logic The interesting question nobody's asking: if the compiler handles optimization, are we entering an era where developers stop thinking about performance altogether? Could that create a new class of hidden bottlenecks? The tool is powerful — but understanding WHY it works still matters. If this shift excites (or worries) you, drop your thoughts below 👇 And if you found this valuable, smash that like button so more engineers see it! ♻️

I hit a subtle bug this week that had nothing to do with data and everything to do with time ⏱️ I was using an imperative API that mutates a list based on index positions. The logic looked simple: move one item to index 0, another to index 1. Running them together produced inconsistent results ⚠️ The issue is that index based operations have positional side effects. Each mutation changes the structure, so the next operation no longer runs on the state you expected. The fix was not about data, but about execution order. Serializing the operations made the result deterministic. A good reminder: When you don’t control state declaratively, you have to control time imperatively 🧠 #javascript #webdevelopment #frontend #softwareengineering #async #programming #buildinpublic #webengineering --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini

Custom hooks can make your codebase harder to debug. Not easier. Here’s why 👇 We often extract logic into hooks: → useUsers → useAuth → useDashboard Sounds clean. But over time: ✖ Logic becomes hidden ✖ Data flow becomes indirect ✖ Debugging requires jumping files Now imagine debugging: → Component → Hook → Another Hook → API You lose context. What I’ve learned: ✔ Not everything should be a hook ✔ Keep critical logic visible ✔ Avoid over-abstraction Use hooks for: → Reusability with clarity Avoid hooks for: → Hiding complexity Key insight: Abstraction reduces duplication. But increases cognitive load. Balance matters. #ReactJS #CustomHooks #Frontend #SoftwareEngineering #Architecture #JavaScript #CleanCode #AdvancedReact #Engineering #Programming

#React 19 isn't asking you to learn a new framework — it's finally catching up to what developers always wanted. The new React Compiler alone can eliminate thousands of lines of manual memoization, and new #hooks like "useActionState" and "useOptimistic" turn what used to be 20+ lines of boilerplate into just a few. If you're still writing "useMemo" everywhere and managing form state manually, it's worth taking another look. The best React code in 2026 is shorter, faster, and more readable — not because we got smarter, but because the tools got better. #OpenSource #Coding #Developer #Programming #SoftwareEngineering #SoftwareDevelopment #CodeNewbie #Dev  #JavaScript #TypeScript #Frontend #FrontendDevelopment #WebDevelopment https://lnkd.in/da26iEBP

𝗜𝗯𝘂𝗶𝗹𝘁 𝗔 𝗥𝗲𝗮𝗰𝘁𝗶 v𝗲 𝗖𝗼𝗺𝗽𝗶𝗹𝗲𝗿 𝗳𝗼𝗿 𝗝𝗮 v𝗮𝗦𝗰𝗿𝗶𝗽𝘁 I tried to build a reactive compiler for JavaScript. My goal was to create a framework where you write simple code and the compiler handles the rest. - You write `let count = signal(0)` and `const doubled = count * 2`. - The compiler makes it work with Solid-level performance and React-like syntax. But I hit a problem. The compiler needs to do different things depending on where the code appears. - If you return a signal from a function, the compiler should pass the signal object. - If you log a signal, the compiler should pass the current value. - If you pass a signal to a child component, the compiler should pass the signal object. - If you use a signal in an arithmetic operation, the compiler should pass the current value. I found a principle to solve this: transfer the signal object only where the compiler controls both sides of the boundary. - If the compiler transforms both the sender and receiver, it can pass the signal object. - If the compiler can't control the other side, it should pass the current value. I designed a two-pass system to make this work. - Pass 1: Scan all files and collect metadata. - Pass 2: Transform each file using the metadata. But I hit more problems. - Barrel files and dynamic imports made it hard to collect metadata. - The Vite build tool didn't support my two-pass approach. - I had to add markers to the HTML to make hydration work. I learned a lot from this experience. - A compiler can only bemagic within its own jurisdiction. - If your types describe something that doesn't exist at runtime, someone will eventually find a bug. - The distance between a beautiful specification and a working framework is measured in person-years. Source: https://lnkd.in/gB5bgvSK

In 2026, the best code you ever wrote was the code you didn't write. I just shipped a complex dashboard in half the time, and I barely touched useMemo or useCallback. I was a skeptic when the React Compiler was first teased. I thought, "Another abstraction layer? More magic? I prefer fine-grained control." I was wrong. Here's why the compiler changed everything for my workflow this year. Before 2026, building performance-critical UIs in React meant managing performance. We spent a significant chunk of time agonizing over re-renders, manually memoizing components, and creating complex dependency arrays. It felt like we were writing React, and then we had to write another set of code to tell React how to do its job. The compiler flipped the script. By automatically applying memoization at a granular level, it moved the responsibility of knowing what to optimize away from the developer and into the build process. The real win isn't just "free" performance; it's cognitive clarity. I'm finally thinking about state flow, data structures, and user experience—not why a button is re-rendering when I type in an input. We aren't performance tuners anymore. We are architects. Are you using the React Compiler yet? Or are you a die-hard manual optimizer? Let’s chat in the comments! 👇 #reactjs #webdevelopment #javascript #frontend #softwareengineering #reactcompiler #performancetuning

Most people don’t have a tooling problem. They have a starting problem. If you’re building: Node / frontend: Start with create-t3-app and Next.js. You get structure, types, and a working system from day one. Python / FastAPI: Use uv for dependency management. Cleaner environments, cleaner history, less guesswork. Rust: Just use Cargo properly. It already solves most of what people try to reinvent elsewhere. The pattern: Pick tools that remove decisions early. You can always change later. Most people never start because they try to design the perfect setup first.

 Finding the Closest Target in a Circular Array (JS / TS) Day 2 👈  Description -Key Idea: Calculate the direct distance: |i - startIndex| Also consider circular wrap-around distance: n - |i - startIndex| Take the minimum of both 🧠 Approach: Loop through the array When target is found: Compute shortest distance considering circular nature Return the minimum distance, or -1 if not found words = ["hello", "i", "am", "learning", "hello"] target = "hello" startIndex = 1 Output → 1 #JavaScript #TypeScript #DataStructures #Algorithms #CodingInterview #ProblemSolving #FrontendDevelopment #Angular #SoftwareEngineering #LeetCode #DSA #CodingPractice pattern is useful in: Circular buffers Ring networks Rotational data structures