I Love ReactJS

I don't know. React already has 22 hook.

Aaron

May 30th is the 10th anniversary of React .

I pulled React the latest code, and it doesn't matter. There are already 22 hook .

where:

this article will talk about the role of React from the perspective of the development of hook over the years.

the change of times

up to now, the development of React has mainly gone through three periods:

the current 22 hook are also the products of these three periods.

CSR period

back in 2013, in order to solve the increasingly complex interactions of facebook , jordwalke developed React . After a period of exploration, React gradually formed a set of development mode that satisfies CSR .

this development model migrates from ClassComponent to FunctionComponent , resulting in the first batch of hook . These hook are all related to the development mode of CSR . For example:

related to the flow of states:

  1. useState

  2. useReducer

  3. useContext

related to side effects of treatment:

  1. useEffect

  2. useLayoutEffect

related to improving the degree of freedom of operation:

  1. useRef

related to performance optimization:

  1. useMemo

  2. useCallback

related to debugging:

  1. useDebugValue

with the continuous iteration of React , several hook are introduced. In essence, they all aim to improve the development model of CSR and supplement or restrict the existing hook capabilities:

  1. useImperativeHandle (control useRef to prevent it from getting out of control)

  2. useEffectEvent (a supplement to useEffect capabilities)

  3. useInsertionEffect (supplement to useEffect scenarios)

  4. useMemoCache (reduce the mental burden of performance optimization)

A brief talk about useMemoCache here. For a long time, whether it is shouldComponentUpdate of ClassComponent , or hook related to the two performance optimizations in FC , there is a relatively heavy mental burden, such as.

useMemoCache is the React internal hook that provides caching support for React Forget .

so this hook is for compilers, not for us ordinary developers.

concurrent period

at the beginning of 13 years, the author of React jordwalke pointed out that React will develop concurrency in the future.

this is not a forward-looking prediction. React itself is a reruntime framework, which means that its iterative direction needs to be expanded around the runtime . The concurrency feature is an excellent runtime performance optimization strategy.

with the concurrency feature on the ground, two concurrency dependencies hook :

are first introduced.

  1. useTransition

  2. useDeferredValue

The essence of

these two hook is to lower the priority of updates. updating means view rendering , so when updates have different priorities, this means that view rendering has different priorities.

this is the theoretical basis of concurrent updates.

however, the emergence of concurrent updates breaks the pattern of React , which has been followed for many years, that is updated at a time to render .

to make existing libraries compatible with concurrent mode, the following hook :

is introduced.

  1. useMutableSource

  2. useSyncExternalStore

therefore, the above two hook are mainly aimed at open source library authors.

RSC period

RSC (server-side components) is a huge project, and its implementation can not be achieved overnight, as can be seen in the new hook .

since it is a server-side component, it involves component rendering on the server side. So, for components that have a unique identity (such as id props below), how do you ensure that this unique identity is consistent with the client on the server side? 

<SomeCpn id={id}/>

if the component renders only on one end, simply use Math.random () to get a unique identity: 

const id = Math.random();

<SomeCpn id={id}/>

but if this logic is run once on both the server side and the client side, it is obvious that id is not unique.

in order to generate id that is unique on the server / client side, there is:

  1. useId

in the concurrency period, due to the introduction of the concept of rendering priority , there are bound to be some renderings in pending due to lack of priority.

how do I show the pending state of rendering ? React introduces the & lt;Suspense> component.

in the RSC period, the React team found that the pending status of rendering is pending , and the pending status of data requests is also pending ?

in other words, any process that requires an intermediate pending state can not be managed by & lt;Suspense> ?

so how do you mark that a process can be managed by & lt;Suspense> ? So there is:

  1. use

all pending states in the process declared through this hook are managed by & lt;Suspense> .

since & lt;Suspense> is becoming more and more important, should we make some optimizations for him? Since & lt;Suspense> can switch between different views, adding cache for him is obviously a good way to optimize, so there is:

  1. useCacheRefresh (used to establish & lt;Suspense> cache)

at this point, the infrastructure of RSC is set up, and the next step is to build the upper application.

on the browser side, the form tag best fits the RSC idea. Around the action attribute of the form tag, React launches the following hook :

  1. useOptimistic

  2. useFormStatus

these two hook are designed to optimize the form submission scenario (also called RSC interaction scenario with the client).

Summary

if CSR period hook is for developers to use directly. Then the first two hook ( useTransition , useDeferredValue ) in the concurrency period are rarely used by developers, but in the later stage, hook like useMutableSource is not used by ordinary developers at all.

Similarly, all the hook of the RSC period will not be used by the average developer. They are all provided for other libraries and frameworks, such as Next.js .

this marks the continuous change in the development direction of React :

Exit mobile version