What has the React team been up to lately?

Hello everyone, I'm Casson.

I don't know if you have a feeling: React The update speed of new features is very slow, and the time is usually measured in years.

In fact, in the long development process of React , in addition to many excellent features (such as Hooks , Suspense ), there are many ideas that have not finally landed .

These ideas are usually not known to developers, which leads to the misconception that some of the new React features are slow .

In light of this, the official React blog published an article today about the direction the team is currently working on.

This article lets us understand React the focus of the next work, mainly including three aspects:

• Low-level features
• optimization related
• Document related

Welcome to join the human high-quality front-end framework group , with flying

Low-level features

After entering React18 , the word concurrency is mentioned more and more frequently in the context of React .

Concurrency -related changes have an increasing impact on React , and even affect daily development (for example, useEffect the development environment will be executed twice in strict mode).

As developers, we want to enjoy the experience improvement brought by concurrency , but we are unwilling to accept the increased complexity of business code.

React The team understands this, so the development model of React is mainly:

React team develops low-level features + cooperates with other open source teams to develop upper-level features

Below we introduce two low-level features in development.

React Server Components

React Server Components (hereinafter referred to as RSC ) was introduced in an official blog in 20 years. As a low-level feature, it is not suitable for developers to use directly.

React团队与Vercel 、 Shopify合作，由这些团队RSC ，封装到业务框架内部（ Next.js ), and then provide the framework to developers.

React与社区的联系（ Vercel专业公司充当中介）， React团队React Iteration of itself (without distraction to develop React the peripheral library such as family bucket).

resource request

Many external resource requests (such as scripts, external styles, font files, images, etc.) have preloading requirements.

React team is developing a common external resource request API in the React environment .

Use this API to request the data, and use Suspense fallback to display the loading effect during the request process, which can prevent popcorning in the view.

The word popcorn is really vivid. He describes the phenomenon that the height occupied by the data before and after loading is different, which causes the page size to change drastically .

Imagine that there are a lot of pictures to be loaded on the page. As the pictures are loaded, the page is constantly stretched by the pictures, just like the corn keeps expanding into popcorn.

optimization related

The optimization-related progress is mainly reflected in three aspects:

• compile time
• Runtime
• analyzing tool

compile time

Huang Xuan introduced React Forget at React Conf 2021 , which is a compiler that automatically adds useMemo and useCallback for optimized React code .

The project is constantly iterating and has recently completed a rewrite. At the same time, the compiler playground is also under simultaneous development.

Runtime

React has not implemented the Vue Keep Alive feature in ---d2551e59363d181c2a64f802ca3e8fd5---. Currently, there are only two ways to control component visibility in React :

• mount / unmout component. The disadvantage is: the state saved in the component is lost after the component is uninstalled, and the state (such as scroll height) saved in the corresponding component DOM is also lost
• Use CSS (such as display: none ) to control the component corresponding to DOM to show and hide. Although this can save the state, it has performance problems—— React It will still traverse hidden components at runtime (hidden components will still be render )

The emergence of Offscreen API combines the best of both worlds.

According to the principle of only focusing on the underlying features mentioned in the beginning, it is best for developers not to use Offscreen API directly, but to use an upper-level framework (such as a routing library) that integrates Offscreen .

As a digression, actually Offscreen API is not a brand new API . Inside the source code, he is one of the components of Suspense .

The next iteration direction is just to expose it from within the source code.

analyzing tool

Analyzing the performance of components has always been a requirement. For this purpose React the team developed a browser analysis tool:

With the arrival of React18 , a new timeline profiler will be added to analyze the scheduling of concurrent updates .

However, none of them address the following needs well:

• A certain update is relatively slow, how to analyze?
• How to analyze the performance of the complete process of an interaction (such as a click, a page navigation)?

One is currently under development API to analyze performance issues in these specific cases.

Document related

React The new document is still in version Beta , and the content is not complete.

But React the team's attitude towards the new document is absolutely serious. There is an interesting detail:

When summarizing the application scenarios of --- useEffect ---, Dan found that some common scenarios can be dealt with by a new native Hook .

So, half of the document was written, Dan ran to propose a useEvent proposal .

Although the current document has not been completed, from the point of view of the published content, whether it is React or veterans, they can all benefit from the new documents.

Summarize

In the 21-year React Christmas special together into the React core team article, the author expressed a point of view:

For a complete feature like Hooks that can become Release , there are many more features behind it that haven't even reached the RFC stage.

All features must wait until fully ready. Until then, it can only make way for other features.

In an industry that places so much emphasis on delivery, and it's getting faster, it's very frustrating when you don't deliver on your promises. But that doesn't mean there's no progress:

You have time to think and plan, and time to experiment and learn. Even a temporary failure brings inspiration to a successful feature.

Even if you haven't completed the work you expected at the beginning of the year, believe that setbacks and disruption are the norm, not the exception, for better or worse, even on React teams.

Just because you're not producing new features doesn't mean you're not delivering value.

I think this is also one of the reasons React the team announced the direction of the next work.