React18 is officially released. What is the future development trend?


Hello, I’m Carson.

March 29, 2022,React18Official release.

fromv16Start,ReactThe team is becoming popularConcurrentThe concept of. stayv18In the iterative process of (alpha, beta, RC), it has also been popular scienceConcurrency characteristicsTherefore, when the official version was released, there were no new features.

This article mainly explainsv18Some future trends revealed in the release log.

Welcome to join the human high-quality front-end frame group and fly with us

Developers may not be exposed to concurrency features

ReactTo increaseAPIIs very cautious. Since its birth in 13 years, the way to trigger the update isthis.setState

And introduceConcurrentAfter the concept, light is andConcurrentdependentAPIThere are several, such as:

  • useTransition
  • useDeferredValue

Even appeared forConcurrentBottomlessAPI(that is, in the case of concurrency, there may be bugs if these APIs are not used), for example:

  • useSyncExternalStore
  • useInsertionEffect

So much more at onceAPI, not likeuseStateThis can’t be usedAPI, besides,ConcurrentThis feature is a little strange to most front-end developers.

You can substitute your own business and let developers use itConcurrency characteristicsHow hard it is.

So, in the futurev18Developed applications,Developers may not be exposed to concurrency features。 These features are more likely to be encapsulated by various libraries.

For example:startTransitionIt allows users to switch between different views without blocking user input.

ThisAPIIt is likely to beRouterImplementation, and then open to developers as a configuration item.

Everything can be suspended

aboutReactGenerally speaking, there are two kinds of bottlenecks to be solved:

  • CPU bottlenecks, such as page jams caused by large amount of computing operations
  • The bottleneck of IO, such as the waiting time when requesting data from the server

amongCPU bottleneckadoptConcurrency characteristicsPriority interrupt mechanism.

Bottleneck of IOGive it toSuspensesolve.

So, everything in the futureIORelevant operations will converge toSuspenseWithin this solution.

From the initialReact.lazyStill under developmentServer ComponentsIn the end, everything can beSuspense

Some of the logic is very complex, such as:

  • Server Components
  • New server-side rendering scheme

Therefore, these operations are unlikely to be directed to developers.

This goes back to the previous article. These operations will be implemented by various libraries. If the complexity is higher, it will be based onReactEncapsulated framework implementation, such asNext.jsRemix

That’s whyReact teamKey figuresSebastianWill joinNext.js

so to speak,ReactThe future positioning is: a front-end underlying operating system, which is complex enough for general developers to use with caution.

And developers useVarious upper layer applications based on the operating system


ifv16Various beforeReact LikeThe library can also be separated by volume and performance advantagesReactFor some cakes, in the future, the two will take completely two tracks, because the ecology of the two is no longer compatible.

There will be no more in the futureReact family bucketThe components in the bucket will eventually become a small module in a larger framework.

At present, it is used directly in your businessReactOr use various frameworks (such asNext.js)?