Hello, everyone. I am Karsong.

Suspense may not be used by many of you in your projects, but Suspense is a very important part of React’s future.

Suspense for React will be explained in this article.

Welcome to join the Human high quality front-end framework research group, Band fly

The React iteration process

React has undergone three major changes to its main features from V16 to V18:

  • V16: Async Mode

  • V17: Concurrent Mode

  • V18: Concurrent Render

To understand the significance of these three changes, we need to understand a confusing concept from React: render.

The render function of the ClassComponent is called render:

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

The process of rendering the result of render to a page is called commit.

The purpose of Async Mode is to make render asynchronous and interruptible.

The purpose of Concurrent Mode is to make the commit concurrently perceived by the user.

Since Concurrent Mode includes breaking change, V18 introduces Concurrent Render to reduce developer migration costs.

So what does it mean to make the COMMIT concurrent in the user’s perception?

The meaning of concurrency

Suspense when it comes to concurrency. 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>
    </>
  );
};
Copy the code

Among them:

  • Every second an update is triggered to update the status count to count => count + 1

  • In Sub asynchronous requests are made, and Suspense for wrapping Sub renders fallback before the request comes back

Assuming that the request returns after three seconds, ideally the page should appear as follows:

// Sub before the request is initiated
<div class= "sub" >I am sub, count is0</div>
<div>count is 0</div>

// The request is initiated in Sub at the first second
<div>loading...</div>
<div>count is 1</div>

// The request is initiated within the second of Sub
<div>loading...</div>
<div>count is 2</div>

// Request is initiated in Sub at 3 seconds
<div>loading...</div>
<div>count is 3</div>

// request in Sub is successful
<div class="Sub">I am sub, request success, count is 4</div>
<div>count is 4</div>
Copy the code

From the user’s perspective, there are two tasks executing concurrently on the page:

  1. Request tasks for Sub (observe changes to the first div)

  2. The task of changing count (observe the change in the second div)

Suspense brings a sense of multi-tasking and Concurrent execution in pages, which is what Concurrent stands for in React.

Suspense is already supported in Async Mode. But the above code looks like this in the Async Mode page:

// Sub before the request is initiated
<div class= "sub" >I am sub, count is0</div>
<div>count is 0</div>

// The request is initiated in Sub at the first second
<div>loading...</div>
<div>count is 0</div>

// The request is initiated within the second of Sub
<div>loading...</div>
<div>count is 0</div>

// Request is initiated in Sub at 3 seconds
<div>loading...</div>
<div>count is 0</div>

// request in Sub is successful
<div class="Sub">I am sub, request success, count is 4</div>
<div>count is 4</div>
Copy the code

From the user’s perspective, when the task requesting Sub is executed, the task changing count is frozen.

This is why it is called Async rather than Concurrent.

The significance of Suspense

As you can see, Suspense is essential for Concurrent.

Suspense can be thought of as splitting up the parts of the page that need to be rendered concurrently.

In Suspense, for example, tasks asking for Sub are separated from tasks changing count to be executed visually concurrently.

After you’ve figured out what Suspense means, what React is doing next is expanding Suspense scenarios (i.e., bringing more scenarios into concurrency).

For example, the existing:

  • React.lazy

  • The fetch library provided by React is transformed into asynchronous requests

  • useTransition

  • useDeferredvalue

Will join in the future:

  • Server Component

  • Selective Hydration

conclusion

React evolved from synchronous to asynchronous to concurrent.

Once concurrency is implemented, the next step is to expand the scenarios in which concurrency can be used.

Suspense is used to break up the parts of the page that need to be rendered concurrently.

This development path was determined from the inception of React, because React is architecturally heavily runtime dependent, and concurrency is the optimal development direction for this architecture to optimize performance.