Use usedeferredvalue for asynchronous rendering

Recently, I am developing a complex application , I found my React The mental model is wrong . This is a simplified version of it ：

const AppWithSynchronousRendering = () => {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App" style={AppStyle}>
      <ExpensiveRenderComponent counter={counter} />
      <BasicComponent counter={counter} />
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

It is generally accepted that , As long as the components prop change , It will immediately re render . So I hope to be here once counter change ,<ExpensiveRenderComponent/> and <BasicComponent/> It will re render , Show their respective contents . Whereas <ExpensiveRenderComponent/> Before displaying its contents, you need to do some processing that will affect the performance , I hope <BasicComponent/> First render . But it's not ： The two components are updated at the same time . let me put it another way ,<BasicComponent/> wait for <ExpensiveRenderComponent/> appear .

I spent quite a long time on this problem , Finally, I found out my React What is missing from the mental model . ad locum , We need to know more about React How rendering works .

React Rendering is synchronous

Whenever the state of a component changes ,React Will trigger the re rendering of the latter and all its sub components . There are three steps in this process ：

1. React First Calculation New caused by state change fictitious DOM. fictitious DOM Basically user interface Javascript Express , Equivalent to actual DOM. The only difference here is not to show virtual DOM, Therefore, the operation is faster .
2. When calculating the new virtual DOM after ,React Will compare it with reality DOM Compare and update the actual changes . This process is called reconciliation.
3. As a last step ,React Apply the changes to the actual DOM. This is called commit Stage .

Calculate new virtual DOM It means running the code of each component rendered due to state changes . therefore , The duration of this step is at least As long as it takes to calculate the most complex components .

In our example , Due to the same state change ,<ExpensiveRenderComponent/> and <BasicComponent/> To render .<ExpensiveRenderComponent/> Some expensive calculations need to be performed , therefore React You must wait for it to complete before updating the actual DOM. in the meantime ,UI Become unresponsive .

So rendering is Sync Of . This behavior is also for Uniformity And designed .React Always re render components because the same state is updated at the same time . stay file This is well explained in ：

This is meaningful in most cases . inconsistent UI Can cause confusion , And may mislead users .

One solution is to optimize the components that take the longest rendering time . But what if it's impossible ？ This is it. React 18 Where it comes in handy ！

React 18 Concurrent characteristics

React 18 On 2022 year 3 Published in , And introduced a powerful concurrent rendering function . Before , Rendering is synchronous , As our example shows ： Each rendering component triggered by a state change must wait for all other components to be ready to update . Use React 18, Each state change can be given a different priority , You can even assign different priorities to each component rendering , As we will see . In short ,React 18 To enable the Asynchronous rendering .

Let's see how the new hook useDeferredValue Apply to our previous problem ：

const AppWithAsynchronousRendering = () => {
  const [counter, setCounter] = useState(0);
  const deferredCounter = useDeferredValue(counter);

  return (
    <div className="App" style={AppStyle}>
      <ExpensiveRenderComponent counter={deferredCounter} />
      <BasicComponent counter={counter} />
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

ad locum ,useDeferredValue Created counter Delayed version of , It allows decoupling <ExpensiveRenderComponent/> and <BasicComponent/> Rendering of ：

• <BasicComponent/> You can use the new immediately counter.
• meanwhile ,deferredCounter Keep the old counter value , until React Finish using the new counter Value completes without blocking the main thread <ExpensiveRenderComponent/> The calculation of . After completion ,<ExpensiveRenderComponent/> It will be updated immediately , And the application is completely up-to-date .

Let's take a look at this hook The role of ：

Because applications respond faster , The user experience has been greatly improved ！ however , You'll notice UI Consistency has been sacrificed , because <ExpensiveRenderComponent/> The old... Will be displayed in a short time counter value . The solution to this problem is in UI It's not the latest time to notify users . It can be like introducing prop isStale It's as simple as ：

const AppWithAsynchronousRendering = () => {
  const [counter, setCounter] = useState(0);
  const deferredCounter = useDeferredValue(counter);

  return (
    <div className="App" style={AppStyle}>
      <ExpensiveRenderComponent
        counter={deferredCounter}
        {/* You can return a loading state based on this prop */}
        isStale={deferredCounter !== counter}
      />
      <BasicComponent counter={counter} />
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

Now? , By means of isStale by true Return to the loading state when UI It's easy to be consistent ：

summary

• Have consistent React Mental models are not only the key to understanding and applying weird behaviors , It is also the key to effectively enhance it .
• React Rendering is synchronized and forced UI Uniformity . If some components need time to render ,UI It could become unresponsive .
• React 18 The concurrency feature supports asynchronous rendering .useDeferredValue You can delay the rendering of expensive components , And make UI More responsive . But if not handled properly , May sacrifice UI Uniformity .
• React 18 There are many other concurrent rendering functions in ：useTransition、Suspense etc. .

Reference resources

• Understanding Rendering Behavior in React
• A Visual Guide to React Mental Models
• Virtual DOM and Internals
• Concurrent Mode Patterns
• React 18 Release Note
• Repository of the demonstration app