How React Forget will make React useMemo and useCallback hooks absolutely redundant

Discover React Forget, the latest core feature by the React team that automates memoization in React components. Prepare yourself for the future of web development as developers no longer need to manually use useMemo and useCallback. Stay updated and be ready to write performant React components effortlessly.

Table of Contents

• A Peek into the Future: The Advent of React Forget
• React Forget: Toward a More Optimized UX and DX
• The Mechanics of React Forget
• Current Developments and Future Plans
• The Current Need for useMemo and useCallback
  • The Role of useMemo
  • The Need for useCallback
• The Problem with useMemo and useCallback
• The Promise of React Forget
• Conclusion: Preparing for the Future

A Peek into the Future: The Advent of React Forget

React Forget, an "auto-memoizing compiler", is the latest revolutionary toolset to take the React community by storm. Unveiled during the React Conf. 2021, it promises to enhance component re-rendering by detecting the need for React.useMemo or React.useCallback. The compiler injects code with similar behavior to these structures, thereby optimizing the performance of your React application.

Dan Abramov, a key member of the React team, suggests that React Forget might even eliminate the need for React.memo(). The compiler apparently memoizes not only the calculation of useMemo() results but also the resulting React element objects returned by the component.

React Forget: Toward a More Optimized UX and DX

Developing an application that delivers a seamless UX often involves the use of memoization. However, this increases the mental overhead for developers, thereby creating a suboptimal DX.

React Forget aims to alleviate this issue by making the process of memoization automatic. It's like having an automatic reactivity compiler that optimizes reactivity at a component level. It ensures that your application re-renders only when the state values meaningfully change.

From an implementation perspective, it means automatic memoization. But, the reactivity framing seems to be a more comprehensible way to understand React and Forget. React Forget essentially shifts the re-rendering behavior of React from object identity changes to semantic value changes, without incurring the runtime cost of deep comparisons.

The Mechanics of React Forget

The core of React Forget is almost completely decoupled from Babel, and the core compiler API is simply old AST in, new AST out. This is achieved while retaining source location data. Under the hood, the compiler uses a custom code representation and transformation pipeline in order to perform low-level semantic analysis.

Current Developments and Future Plans

During the React Advanced conference, the developers of React Forget, Joe Savona and Mofei Zhang, provided insights into the current state and future plans for the project in their talk "Understanding Idiomatic React".

According to Joe Savona, as of 2023, React Forget is still in active development. While the project has made significant progress, it is not yet ready for release. Savona emphasized the team's commitment to ensuring the highest standards of quality, documentation, support, and bug fixing before making it available to the public.

"We hold ourselves to a very high bar, not just in terms of quality but also in providing documentation, support, and bug fixing. When React Forget is open source, we want it to be a good open source project." - Joe Savona

When discussing future plans, Mofei Zhang mentioned that the goal is to eventually open source React Forget. However, the exact release date for the open-source version was not provided during the talk. Zhang explained that the team wants to focus on making Forget as awesome as possible before releasing it as an open-source project. They want to ensure it meets the high bar set for quality and community support.

Regarding its usage, Joe Savona highlighted that React Forget is designed to be integrated into the build pipeline. Once a stable version of React includes its required runtime API, developers will be able to install React Forget as a Babel plugin. This approach ensures that React Forget can seamlessly integrate with existing React projects.

In terms of adoption within Meta, both Savona and Zhang acknowledged that they have been testing and refining Forget within the Meta organization. They have the unique advantage of having access to a large number of developers and the scale of Facebook for stress testing. While they did not provide specific adoption metrics, their experience within Meta has provided valuable insights and use cases that they believe will benefit the wider community.

"Our next step is to scale up until Forget is used everywhere at Meta, refining on small details." - Mofei Zhang

The Current Need for useMemo and useCallback

To understand the importance of React Forget, one must first understand the need for useMemo and useCallback in the current React ecosystem.

The Role of useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders. It accepts two arguments: a function that calculates the value you want to cache and a list of dependencies. Here's an example of how you might use useMemo:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

In this example, useMemo helps optimize the performance by skipping unnecessary re-rendering of the TodoList component.

The Need for useCallback

useCallback, on the other hand, returns a memoized version of the callback function that only changes if one of its dependencies has changed. It's useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

import { useCallback } from 'react';

function TodoList({ todos, tab }) {
  const handleTodoClick = useCallback(
    (id) => {
      // handle the click event
    },
    [todos, tab] // dependencies
  );

  // ...
}

In this case, useCallback ensures the handleTodoClick function doesn't change on every render unless todos or tab changes, thereby preventing unnecessary re-renders.

The Problem with useMemo and useCallback

While useMemo and useCallback are great tools to optimize performance, they add complexity to the code and can be difficult to use correctly. If the dependencies array isn't correctly specified, it can lead to confusing bugs and performance issues. Using these Hooks can also make the code harder to read and understand.

The Promise of React Forget

React Forget aims to solve these problems by automating the process of memoization. With the new compiler, developers won't need to manually use useMemo or useCallback. Instead, the compiler will automatically determine when memoization is necessary and apply it, thereby reducing the mental overhead for developers and making the code easier to read and understand.

Conclusion: Preparing for the Future

As React developers, it's crucial to stay updated with the latest developments and features in the React ecosystem. The upcoming React Forget promises to be a game changer, making it easier to write performant React components without the need for manual memoization. While we anticipate the release of this new tool, it's essential to understand and master the current tools at our disposal, such as useMemo and useCallback. So, let's keep coding, keep learning, and prepare ourselves for the exciting new features that are on their way!

If you found article helpful, don't forget to give it a 👍 and share it with your fellow developers. For more such content, feel free to follow me on Twitter. Also if you're wondering what new React features you can apply already now, check out my article on React Server Components.