Analysis of the significance and function of Suspense to React

introduction

Many friends may not have used it in the projectSuspense,butSuspenseyesReactA very important part of future development.

This article will explainSuspenseforReactThe meaning of

React iterative process

ReactThe main features from v16 to v18 have undergone three major changes:

• v16: Async Mode (asynchronous mode)
• v17: Concurrent Mode (concurrent mode)
• v18: Concurrent Render (Concurrent Update)

To understand the significance of these three changes, you need to understand firstReactA very confusing concept—render(Render).

ClassComponentofrenderFunction execution is calledrender：

class App extends Component {
  render() {
    // ...This is the render function  }
}

AndrenderThe process of rendering the result to the page is calledcommit。

Async ModeThe purpose is to makerenderBecome asynchronous and interruptible.

Concurrent ModeThe purpose is to makecommitIt is concurrent in the user's perception.

becauseConcurrent ModeIncludebreaking change,sov18ProposedConcurrent Render, reduce the cost of developers' migration.

SoMake commit concurrent in user perceptionWhat does it mean?

The meaning of "concurrency"

Speaking ofconcurrent, I have to mentionSuspense. Consider the following code:

const App = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  }, []);
  return (
    <>
      <Suspense fallback={<div>loading...</div>}>
        <Sub count={count} />
      </Suspense>
      <div>count is {count}</div>
    </>
  );
};

in:

• An update will be triggered every second, and the status will becountUpdated tocount => count + 1
• existSubAsynchronous request will be initiated in the request, and before the request returns, the package will be returned.SubofSuspenseWill renderfallback

Assuming that the request returns after three seconds, ideally, the pages before and after the request is initiated will be displayed in sequence as:

// Before the request within the Sub is initiated<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// The request within the Sub was initiated for 1 second<div>loading...</div>
<div>count is 1</div>
// The request within the sub was initiated for the second second<div>loading...</div>
<div>count is 2</div>
// The request within the Sub was initiated for 3 seconds<div>loading...</div>
<div>count is 3</div>
// After the request within the Sub is successful<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

From the user's perspective, there are two tasks on the pageconcurrentimplement:

• askSubTask (Observe the first onedivChanges)
• ChangecountTask (observe the second onedivChanges)

SuspenseBringedMultitasking concurrent execution on the pageFeeling that'sConcurrent(Concurrent) inReactMeaning in.

ActuallyAsync ModeWhen it was supportedSuspense. But the above code isAsync ModeThe page is as follows:

// Before the request within the Sub is initiated<div class=“sub”>I am sub, count is 0</div>
<div>count is 0</div>
// The request within the Sub was initiated for 1 second<div>loading...</div>
<div>count is 0</div>
// The request within the sub was initiated for the second second<div>loading...</div>
<div>count is 0</div>
// The request within the Sub was initiated for 3 seconds<div>loading...</div>
<div>count is 0</div>
// After the request within the Sub is successful<div class=“sub”>I am sub, request success, count is 4</div>
<div>count is 4</div>

From the user's perspective,Request Sub TaskWhen executing,Change the count taskIt was frozen.

This is why it is calledAsync(Async) insteadConcurrent(concurrent).

The meaning of Suspense

You can see that forConcurrent，SuspenseIt is an indispensable part.

It can be considered thatSuspenseThe function isDivide the parts of the page that need to be rendered concurrently。

For example, in the above example,SuspenseWillRequest Sub TaskandChange the count taskDivide and execute visually concurrently.

When it's clearSuspenseAfter the meaning ofReactWhat you are doing next is to expandSuspensescenes (that is, include more scenes in the category of concurrent rendering).

For example, the current ones are:

• passReactProvidedfetchAsynchronous request after library transformation
• useTransition
• useDeferredvalue

Will join in the future:

• Server Component
• Selective Hydration

Summarize

ReactThe development history is:synchronousarriveasynchronous, and thenconcurrent。

When implementedconcurrentAfter that, the next development direction will be: Continuous expansion and useconcurrentscene.

SuspenseThe function isDivide the parts of the page that need to be rendered concurrently。

This development path is fromReactIt was decided at the beginning of its birth, because from a structural perspective,ReactHeavy dependence on the runtime, in order to optimize performance,concurrentIt is the optimal development direction under this architecture.

The above is the detailed content of the analysis of the significance and function of Suspense to React. For more information about the role of React Suspense, please pay attention to my other related articles!