React Forgetttabouttittt
Today’s issue: Answering the questions you’ve been too afraid to ask about React Forget, plus a big announcement from ESLint, and a new canary in the Next.js coal mine.
Welcome to #234.
The Main Thing
What you can do with your hard earned knowledge of referential equality
React Forgetttabouttittt
It’s been two years since the React Team started working on React Forget, the compiler that automatically memoizes your components and hooks — and it still hasn’t been open-sourced.
The long wait has caused some among us to lose hope, wondering if the React Team had forgotten the project entirely (🥁). Was this just another pipe dream that looked promising, but was doomed to drown in a sea of complexity?
Not exactly. And at last week’s React Advanced Conference, Joe Savona and Mofei Zhang from the React Team took the stage to finally silence the doubters.
They informed us all that yes, they are still making progress on React Forget, and they gave us a peek under the hood to show how it could be even more powerful than they first expected.
But before we get there, let’s back up and answer one question you might have been too embarrassed to ask before now: What problem is React Forget trying to solve?
The core idea of React is that you define your UI as a function of the current state. This means that React re-renders whenever your app’s state changes, but it also means that React can re-render too much, degrading performance.
We can prevent this by utilizing the useMemo and React.memo APIs, but manual memoization still has downsides:
-
It makes your code less concise, less clear, and less composable, especially as your team/codebase scales.
-
It requires you to imperatively tell React how to process your code, thus killing some of React’s declarative magic.
In his talk, Joe explained that “Manual memoization is a compromise: we sacrifice some of the clean, concise original React logic for better performance.”
And that’s where React Forget comes in. It’s a low-level compiler that understands the rules of React and JavaScript, and can use that knowledge to automatically memoize your components for you.
That way, you’ll know your app is always fully memoized, without having to stress about whether you just invalidated 50 components by missing a single useCallback.
So where do things stand today? Are they close to open-sourcing it? It’s getting there. Mofei Zhang explained that the compiler is currently being used in production on two Meta properties — the Instagram web app and the App Store for Quest VR devices (a large React Native codebase).
The good news is that the performance gains from React Forget have exceeded expectations so far. The less good news is that they still need to test it out on every other Meta property, and make additional tweaks and changes based on that feedback before they’ll open-source it to plebs like you and me. So it’ll still be a while.
What does this mean for the future of React? For most developers, React Forget should deliver on its promise of better performance and better DX. But there’s still no such thing as a tradeoff-free lunch.
In this case, that means trading in the developer complexity of manual memoization for new infrastructure complexity of automatic memoization with the compiler. That’s a good trade, but it will probably make the React toolcahin more complicated — which is a cost that will be felt most by meta-frameworks and build tools like Next.js and Vite.
Bottom Line: For some obsessed passionate React devs, Forget might feel like Captain Ahab’s white whale. But if there’s one thing I learned from reading the Moby Dick sparknotes in High School, it’s that you probably shouldn’t get too fixated on things you can’t control.
Also, that dudes in the 19th century were a little too fascinated with whale biology.
    |
Our Friends
(With Benefits)
I've always valued a versatile product.
FusionAuth makes your auth flexible
Your old auth provider was working fine — until you tried using it in a different environment and everything went straight to hell.
Might want to try out FusionAuth. Their hyper-versatile auth platform works seamlessly for server applications, SPAs, mobile apps, back-end services, and anywhere else you could ever need authentication.
It’s easy (and free) to set up common features like social sign-on and multi-factor auth, but it’s also simple to add customized enterprise features and new environments as you scale up.
Check out the docs to try out their “choose-your-own-adventure” experience to quickly add auth to any type of app.
Cool Bits
-
Next.js 14 just dropped at Next Conf. We’ll write about it Monday, as soon as my brain stops making this weird buzzing sounds from writing 600 words about an unreleased React compiler.
-
React just released useFormState, which allows you to update state based on the result of a form action, in a Canary (cough Next.js cough) release.
-
Bugherd is the best way to manage web project feedback loops. It automatically provides a screenshot, along with the user’s browser, OS, and more, so you can pinpoint issues and resolve bugs fast. [sponsored]
-
ESLint just announced that its next minor release will deprecate core formatting rules, and recommends you use a source code formatter like Prettier.
-
MDX 3 just came out with a couple minor improvements to the MDX format, a Node.js version bump, and an almost disturbing lack of drama.
-
Matteo Collina made this 16-minute demo about How to make your Node.js API 5x faster using
async-cache-dedupe. I haven’t taken time to check his references and see if he’s qualified to speak on this topic, so we’ll just have to take his word for it 🙃. -
Right on time for today’s issue, Tim Pillard wrote an article called React Memo is good actually.
-
QA Wolf lets you kiss bugs goodbye, without ever doing end-to-end testing yourself 🙏. They’ll get your web app to 80% test coverage in 4 months, build and maintain your test suite in Playwright, provide unlimited parallel test runs on their infra, and send human-verified bug reports directly to you. [sponsored]
-
Astro 3.4 comes with page partials, improved image optimization, and a new (experimental) dev overlay that lets you inspect your page islands.
-
Internet Artifacts by Neal Agarwal is an interactive museum of internet artifacts, with everything from the first-ever spam email to Homestar Runner. I haven’t felt this much nostalgia since I stayed up til 3:00am drinking Monsters and watching episodes of Rocket Power on YouTube.