React Compiler - Understanding Idiomatic React (React Forget)
From Author:
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization.
This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.
FAQ
There is no specific release date for React Forget. Meta is currently refining and testing it internally and plans to release it as an open-source project once it meets their high standards for quality and documentation.
Yes, the long-term goal of React Forget is to eliminate the need for useMemo, react.memo, and useCallback by automatically handling memoization.
React Forget uses escape analysis and type inference to determine when to memoize components and hooks. It only memoizes values that make it out of the function and avoids memoizing primitives to prevent unnecessary re-renders.
Yes, React Forget will be part of the build pipeline and will require a small dependency and an additional runtime API in React. It will be available in a future stable version of React.
React Forget is a compiler developed by Meta that automatically memoizes your React components and hooks to improve performance by reducing unnecessary re-renders.
React Forget is not open-sourced yet because Meta is still refining and testing it internally. They want to ensure it meets high standards for quality, documentation, and support before releasing it to the open-source community.
React Forget complements React server components by optimizing the client-side developer experience, making interactive parts of apps faster and improving overall performance.
No, React Forget is not currently open-sourced. However, Meta plans to open-source it once it has been sufficiently refined and tested internally.
The name 'React Forget' is part of Meta's policy to name projects with F-words that are puns. 'Remember' does not fit this naming convention.
React Forget improves performance by automatically determining when to memoize components and hooks, reducing unnecessary re-renders without the need for developers to manually add useMemo or react.memo.
Video Transcription
1. Introduction to React Forget and Our Vision
I'm Joe, an engineer on the React team at Meta. I'll be talking about our vision for client-side React development and React Forget, a compiler we've built at Meta. Mofe will discuss our progress shipping Forget at Meta. We use plain JavaScript values and syntax in our code, which allows us to use the platform efficiently. However, there's a potential problem with unnecessary rerenders in our app, affecting performance.
So, yeah, I'm Joe. Is this too loud? It feels loud. All right, good. So, I'm Joe. I'm an engineer on the React team at Meta and in this talk we would like to share our vision for client-side React development, specifically I'm talking about React Forget. Forget is a compiler that we've built at Meta that automatically memorizes your components and hooks. So if you were hoping for us to be open sourcing Forget today, I am sorry to disappoint you. But we've made a lot of progress and we're excited to share more about that with you today.
So, I'm going to be talking about what our vision is, what Forget is, and how it fits into that vision. And then Mofe is going to come up and talk about our progress shipping Forget at Meta.
So to understand our vision for React, it helps to look at some code. Here I'm showing a simplified version of an internal component from Meta. This component takes a heading, a list of videos, and a filter. And then it renders the heading and list of videos that match that filter. You can imagine the real component is more complicated. You know, the filters actually state, et cetera. It's a kind of simplified version. So personally, I think there's a lot to like about this code. It's a small, clear, concise component. It uses plain JavaScript values, arrays. We use standard JavaScript syntax, if-else for conditionals, a for loop for iteration. We don't need to learn something new, this is just the JavaScript that we already know. Use the platform.
So in a lot of ways, this is React at its best. We use this UI as a simple function of data. There's really only one potential problem with this code. If we were to ship this as-is, we might see the parts of our app rerender unnecessarily, and that can affect performance, slowing things down. So let's see an example of how that can happen. Imagine that our component rerenders, but only the heading has actually changed. When the component renders, it passes that new heading down to the heading component, which updates as we'd expect.
2. Optimizing Performance with Memoization
By default, when a component rerenders, the entire component reruns, creating a new filtered videos list. To address this, we can use usememo and react.memo to optimize performance. By applying usememo and react.memo consistently, we can achieve good performance with React. However, memoization can make the code less clear and lead to debates about its usage. The need for memoization depends on the context of the application.
But that's not all that happens by default. When our component rerenders, the entire component reruns. This entire function reruns. That means we create a new filtered videos list, and then we pass that to video list, which then also rerenders all the way down the tree. And this will happen all the way down the tree. Even though nothing meaningfully changed about the videos.
To address this, we can use two React APIs, usememo and react.memo. So here, I've applied usememo to the logic for filtering the videos. The array at the bottom here tells React to only recompute filtered videos if the videos or filter values have actually changed. So now if only the heading changes, we don't recompute the list of filtered videos. Great. But that's not quite enough. Because even though we're passing the same filtered videos down to the video list component, by default, React will still re-render a component, even if its props haven't changed. To opt out of that, we wrap the component with react.memo. So now we get the expected performance with these two changes. Now when heading changes, we won't have to update the video list component. Great.
But if you judiciously apply React use memo, use call back, which is kind of the call back version of use memo, and then react.memo, if you use them consistently throughout your codebase, you can achieve really good performance with React. And a lot of other presenters have talked about that earlier. We found that generally when applications do have a performance problem, it's because of this kind of missing memoization and it can be fixed by just adding this back.
Memoization has made our original code a lot less concise and clear. We're no longer simply describing what the UI should be showing. We're having to tell React how to process our code. That's kind of losing some of the original idea of React, right? Declarative rendering. But now we're having to go into the how. And then our code reviews become about whether we've memoized correctly, whether we've memoized too little, too much. We get blog posts saying you shouldn't memoize at all, you don't need memoization. And the thing is both of them are kind of right, because it all depends on the context. This code, the original code here might be fine in a lot of apps. But for other apps they might run into a performance problem.
Comments