React Forget, a groundbreaking toolset known as an ‘auto-memoizing compiler’ that has recently captivated the React community.

Launched at React Conf. 2021, this innovative tool aims to elevate the efficiency of component re-rendering by intelligently identifying instances where React.useMemo or React.useCallback are needed.

The compiler seamlessly integrates code with functionalities akin to these constructs, leading to a significant optimization of your React application’s performance.

React Forget/React Compiler

First up, the React Compiler has officially transitioned from a research project to a production-ready tool. It’s now powering instagram.com and the team is working hard to extend its use across more platforms at Meta, with plans for the first open source release.

Now, let’s talk about why this is a game-changer. React sometimes re-renders too frequently when state changes, and up until now, the solution has been manual memoization using APIs like useMemo, useCallback, and memo. But let’s face it, manual memoization can be a hassle. It clutters up our code, it’s error-prone, and it requires constant upkeep.

But React isn’t satisfied with just an okay solution. Their goal is for React to automatically re-render only the necessary parts of the UI when state changes, without deviating from React’s core principles. That’s why they’ve developed an optimizing compiler for React.

Now, JavaScript optimization isn’t easy, especially with its loose rules and dynamic nature. But the React Compiler is up to the challenge. It models both JavaScript’s rules and React’s specific requirements. For instance, React components must be idempotent and can’t mutate props or state values. These rules provide a safe framework for the compiler to optimize within.

Of course, developers sometimes push the boundaries, and React Compiler aims to work seamlessly with as much code as possible. It’ll detect when code strays from React’s rules and either compile it safely or skip compilation altogether if it’s risky.

For developers keen on ensuring their code aligns with React’s rules, React recommends enabling Strict Mode and configuring the React ESLint plugin. These tools can help catch bugs and ensure the quality of your applications, both now and in anticipation of future features like React Compiler.

To witness the compiler in action, you can check out their talk from last fall. Since then, they’ve rolled it out to production on instagram.com and are now gearing up to expand its use across more surfaces at Meta and eventually to open source.

Exciting times ahead for React, and we’ll be keeping an eye out for more updates in the months to come.

How we are currently handling memoization in React?

In React, memoization, or the process of optimizing performance by storing and reusing computed values, is commonly managed using two main hooks: useMemo and useCallback.

useMemo

useMemo helps store the result of a function so that it doesn’t need to be recalculated every time. It takes two arguments: the function to calculate the value and a list of dependencies. For example:

const a = 2;
const answer = useMemo(() => a + 1, [a]);

Here, sum caches the value 3, and it won’t be recomputed unless a changes. This is useful for optimizing complex computations, preventing unnecessary recalculation on page or component re-renders.

useCallback

useCallback is similar but specifically for functions. It memoizes a function, creating a version that only changes when its dependencies are updated. This is beneficial when you want to avoid unnecessary re-renders of a component unless its props have changed. For instance:

const addNew = useCallback(() => {
  setNew((t) => [...t, "New Task"]);
}, [tasks]);

In this example, the addNew function is memoized using useCallback, ensuring it’s reused unless the tasks dependency changes. This helps prevent unnecessary re-renders when passing functions as props between components.

Both useMemo and useCallback contribute to better performance by efficiently handling computations and function creation in React applications.

React Forget

Right now, in React, we use tools called useMemo and useCallback to make our apps run faster. They help us remember things and avoid doing unnecessary work.

But guess what? There’s something new on the horizon called React Forget! It’s like a super-smart helper that automatically does all the remembering for us. With React Forget, we won’t need to worry about useMemo and useCallback anymore.

This means less confusion for developers. React Forget will figure out when to remember things without us having to tell it. It’s supposed to make our lives simpler.

Using React tools like useMemoand useCallback can really boost how fast your React app works. If you use these tools consistently in your code, your app’s performance can become pretty impressive. When apps seem slow, it’s often because they’re missing this kind of optimization, and just by adding it, the speed can get much better.

But here’s the thing – optimizing with these tools makes our code less straightforward. We used to just say what the UI should show, keeping it simple. Now, we’re telling React how to process our code. It’s like we’re getting into the details, which isn’t the original idea of React – that was about easy and clear rendering.

With these optimizations, our code reviews end up being all about whether we’ve used these tools correctly, if we’ve done too little or too much. Some people even say you don’t need these optimizations at all. The truth is, it depends on the situation. The original code might work well in many apps, but in some cases, not using these tools can lead to a performance problem.

Improving Server Builds and Open-Source Plan

Forget is discussed as a tool to optimize server builds by removing unnecessary code for server-side rendering (SSR) and enabling dead code elimination.

The team plans to make Forget open-source once it’s fully prepared. They emphasize their unique access to data scientists and the extensive scale of Facebook for thorough testing. The team is actively exploring use cases, and they aim to share their valuable experience with the broader open-source community.

For instance, Forget can enhance server builds by recognizing that certain code isn’t needed for SSR and removing it. This dead code elimination results in a more efficient server build. The team is focused on generating more ideas for the future using this compiler platform.

Regarding the development focus, the team shares that they spend significant time on their open-source release strategy. They are actively testing Forget on open-source applications, including other frameworks like Remix and Next.js. This ensures compatibility and integration with various pipelines, making Forget suitable for diverse applications within the open-source community.

The Issue with useMemo and useCallback

Even though useMemo and useCallback help make our code run faster, they also make things a bit complicated.

Figuring out the right dependencies to put in the array can be tricky. If you don’t get it right, your code might end up with bugs that are hard to understand, and it could slow things down instead of making them faster. Plus, using these tools can make the code look more confusing and harder to read.

The Hopeful Future of React Forget

React Forget plans to fix these issues by doing memoization automatically. This means developers won’t have to bother using useMemo or useCallback themselves. The compiler will figure out when to do memoization and handle it without developers needing to think about it. This should make things simpler for developers, and the code will be easier to read and understand.

Instalation and Release of React Forget

The development team is dedicated to perfecting Forget before making it an open-source project. They want it to meet high standards in quality, documentation, support, and bug fixing. The aim is to have Forget ready for open-source use.

Addressing a question about installation, it’s clarified that Forget is part of the build pipeline and requires installation. It has a small dependency and relies on an additional runtime API in React. Users will need to install it once it’s incorporated into a stable version of React.

As for the release date, there’s no specific timeframe mentioned. The team is following a thorough process, including initial prototypes, iterations, refining on various products, and ensuring high standards before the open-source release. The focus is on making Forget an excellent open-source project, and the team is committed to achieving this before the release.

So, for now, users are advised to wait until React Forget is officially launched.

Conclusion

For all of us working with React, it’s important to keep ourselves informed about the newest things happening in the React world. The upcoming React Forget seems like it’s going to be a big deal, making it simpler for us to create efficient React components without having to manually remember things.

While we’re excited about this upcoming tool, it’s also crucial to be familiar with the tools we have right now, like useMemo and useCallback. So, let’s stay in the coding and learning groove, getting ready for the cool new features that are on the horizon!