Farooq Khan’s Post

'useMemo' is dead. 'useCallback' is dead. If you're still spending hours obsessing over dependency arrays, you are officially writing legacy React code. Okay, maybe "dead" is a bit dramatic. But with React 19.2 making the React Compiler globally stable, the way we build interfaces has fundamentally shifted. I remember spending an embarrassing amount of time in PR reviews debating whether a specific object or function actually needed memoization. We'd stare at exhaustive-deps warnings, blindly adding variables to arrays until the linter finally gave us a thumbs up. It felt like a React developer rite of passage. Now? The compiler just handles it. It automatically memoizes your components, hooks, and values right at build-time. Those manual wrappers you’ve been carefully placing around your codebase are now essentially just "hints" to the compiler. In most cases, they're just visual clutter. This shift toward "Automatic Performance" is probably the biggest developer experience win we've had in years. We can finally stop acting like human compilers. We get to go back to focusing on actual product logic, state design, and solving real user problems instead of babysitting render cycles. Of course, there's always nuance. You might still find yourself reaching for manual memoization when dealing with a stubborn third-party library that hasn't caught up, or when debugging a highly specific performance bottleneck. But for 99% of your daily component writing? You can let it go. I know React developers are notoriously stubborn when it comes to performance optimization, though. Old habits die incredibly hard, and giving up control to a build-time compiler feels unnatural after years of doing it by hand. So I'm curious where everyone stands right now. 👇 POLL: Are you still manually optimizing with useMemo/useCallback? 1️⃣ No, I trust the Compiler. 2️⃣ Only for 3rd party lib compat. 3️⃣ I still don't trust it. 4️⃣ What is manual memoization? Vote below and let me know in the comments if you've run into any weird edge cases with the new compiler! #ReactJS #WebDevelopment #Frontend

Stop writing useMemo and useCallback manually. The React Compiler does it better.   The React Compiler hit v1.0 in October 2025, and in 2026 adoption is picking up fast. The idea is simple but powerful: instead of you telling React "don't re-render this unless X changes", the compiler figures it out automatically — at build time.   That means this pattern you've been writing for years:   const expensiveValue = useMemo(() => compute(a, b), [a, b]); const handleClick = useCallback(() => doSomething(id), [id]); …is now something the compiler handles for you. You write plain functions and values, React optimizes them.   What this actually changes for your codebase: - Less boilerplate, more readable components - No more "why is this re-rendering?" debugging sessions - Fewer bugs caused by wrong dependency arrays   Is it perfect? Not yet — the compiler has rules your code needs to follow (React's rules of hooks, no side effects during render). But for most codebases, it's a drop-in win.   The shift is real: manually optimizing renders is slowly becoming a code smell, not a skill flex.   Have you tried the React Compiler yet? Is your codebase ready for it? Drop a comment 👇   #ReactJS #FrontendDevelopment #WebDev #JavaScript #ReactCompiler #WebPerformance

𝗜𝗯𝘂𝗶𝗹𝘁 𝗔 𝗥𝗲𝗮𝗰𝘁𝗶 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 - Vite's plugin API didn't support my two-pass approach - TypeScript didn't understand my signal types without custom plugins 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 - Server-side rendering and hydration are harder than they seem - Batching and reactive updates are tricky to get right In the end, I decided not to ship my framework. - The distance between a beautiful specification and a working framework is huge - I had a day job and couldn't dedicate the time and resources needed But I'm glad I tried. I learned a lot and became a better engineer. - Sometimes the best code you'll ever write is the code you decide not to ship - Life goes on, and you can always open a React component and keep coding Source: https://lnkd.in/gB5bgvSK

#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

I just went down a rabbit hole on React Compiler and honestly… why isn’t everyone talking about this? 🤯 For years, we’ve been writing code like this: const filtered = useMemo(() => items.filter(i => i.type === filter), [items, filter]); const handleClick = useCallback(() => doSomething(), []); const MyComp = React.memo(({ data }) => {data}); And we called it “best practice.” But let’s be honest — it’s mostly boilerplate. It clutters your code, it’s easy to get wrong, and a stale dependency array has burned every React dev at least once. 🚀 React Compiler changes the game. Instead of manually telling React what’s stable, the compiler figures it out at build time by analyzing your data flow. You write this: function ProductList({ items, filter }) { const filtered = items.filter(i => i.type === filter); return ; } And the compiler automatically generates the optimized version: ✔️ Memoization handled ✔️ Dependencies always correct ✔️ No human error ⚠️ The catch? Your code must follow the Rules of React: → No mutating props or state → No conditional hooks → Pure render functions If you break the rules, the compiler simply skips that component — fail-safe by design. 💡 The best part? No new APIs. No new mental model. Just React… but smarter. It’s essentially a Babel plugin you can enable today: // Next.js experimental: { reactCompiler: true } This might be one of the biggest DX improvements React has shipped in years — fewer bugs, cleaner code, and more predictable performance. Still experimental, but very promising. Have you tried it yet? Curious if it actually reduced your need for useMemo/useCallback 👇 #React #ReactJS #Frontend #WebDevelopment #JavaScript #nextjs

You React codebase is full of useMemo and useCallback you didn't need to write. 👇 Most devs wrap functions and values in memo hooks by default — thinking it makes things faster. It doesn't. Wrong dependency arrays cause stale bugs. Unnecessary memoization adds overhead. And nobody on your team can read it easily. ❌ Manual useMemo/useCallback More lines, wrong dependency arrays, stale closures, harder to read — and you're still guessing if it actually helped performance ✅ React Compiler (v1.0 — Oct 2025) Analyzes your component at build time, inserts stable refs automatically, skips re-renders without you touching a single dependency array The React Compiler (v1.0, October 2025) analyzes your components at build time and handles memoization automatically. Write plain, readable code — the compiler inserts stable refs where they're actually needed. Only keep manual useMemo/useCallback for third-party library interop or truly expensive calculations. That's maybe 10% of your current usage. Simple code + smart compiler = cleaner codebase and faster UI. That's the move now. ⚡ When to still use useMemo / useCallback manually → External libs that compare by identity (e.g. maps, virtualization) → Truly expensive calculations with unstable inputs → Third-party subscriptions that need a stable function reference → Everything else? Let the compiler handle it. #ReactJS #ReactCompiler #JavaScript #WebDevelopment #FrontendDevelopment #Programming #useMemo #useCallback #React19 #CleanCode #WebDev #FrontendDeveloper #SoftwareEngineering #100DaysOfCode #JavaScriptDeveloper #ReactDeveloper #CodeQuality #Performance #TechCommunity #SoftwareDevelopment

Guys, you don't want to miss this one 👀 I recently found something interesting while reading an open-source project using Javascript. I noticed some engineers defining the same method twice on a single object — using two different notations: Obj.prototype.getValue = function() { ... }; Obj.prototype['get_value'] = Obj.prototype.getValue; At first, it felt… weird. Why would you create two names for the exact same function? So I dug into the build config and source code and it pointed me to something I hadn't explored deeply before: ✨ Google Closure Compiler ✨ Turns out, Google has this compiler that aggressively optimizes JavaScript — making the final bundle significantly smaller. But the most interesting part is the ADVANCED_OPTIMIZATIONS mode. This mode is very aggressive. It can: - rename both variables and properties into shorter names - remove dead code - inline functions Most minifiers only rename local variables. Closure Compiler goes further, it renames obj.getValue to obj.a. And here's the catch, it will also rename your public API methods. External code calling obj.getValue() would break because that name no longer exists in the minified build. That's where the two-notation pattern comes in. From what I found: - Dot notation (obj.getValue) → the compiler freely renames this to obj.a - Bracket notation with a string literal (obj['get_value']) → the compiler cannot see inside strings, so this name is preserved exactly So the dual naming isn't random — it's a deliberate technique. The dot-notation version is for internal use (gets minified for smaller bundles), and the string-based version is the stable public API that survives minification. It's not about camelCase vs snake_case. It's about how you access the property that determines whether the compiler can touch it. Still exploring this, but I find it really interesting how something as subtle as notation style can affect how compilers treat your code. Have you ever used Closure Compiler or similar aggressive optimizations before? Curious what your experience was 👀 #google #optimization #compiler

React 19’s compiler is officially shifting the landscape for senior developers, and it’s about more than just "saving time." It is fundamentally changing how we define expertise in the React ecosystem. For years, a "Senior React Developer" was partially defined by their ability to manually manage the rendering lifecycle—knowing exactly where to place useMemo, useCallback, and React.memo to keep applications performant. The React Compiler (formerly "React Forget") is automating that expertise. Here’s why this matters for the senior dev community: 🚀 The End of "Memoization Ceremony" We no longer need to spend mental cycles (or PR review time) debating hook dependency arrays or whether a component needs to be wrapped in a memo. The compiler performs static analysis at build time to insert these boundaries automatically. 🧠 From Implementation to Architecture When the "how" of optimization is handled by the compiler, seniors can refocus on the "what" and "why." Our value shifts from micro-optimizing component renders to high-level system design, data architecture, and user experience. 🛠️ Enforced "Rules of React" The compiler doesn't just optimize; it validates. It requires code to follow the strict "Rules of React." This means senior devs will spend less time debugging "magic" side effects and more time ensuring the codebase follows predictable, functional patterns. 📉 Lowering the Barrier The gap between a junior’s "unoptimized" code and a senior’s "tuned" code is shrinking. In a React 19 world, everyone gets high-performance components by default. The takeaway? The "React Expert" of 2026 isn't the one who knows the most hooks—it's the one who understands how to build scalable, maintainable systems that leverage these automated tools. #ReactJS #React19 #WebDevelopment #SoftwareEngineering #JavaScript #Programming

𝗜𝗯𝘂𝗶𝗹𝘁 𝗔 𝗥𝗲𝗮𝗰𝘁𝗶 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