chapter thirteen

13 Experimenting with useTransition, useDeferredValue and SuspenseList

 

This chapter covers

  • Delaying UI updates with the useTransition hook
  • Flagging inconsistent state and UI with the isPending Boolean
  • Using old and new values simultaneously with the useDeferredValue hook
  • Managing multiple fallbacks with the SuspenseList component
  • Understanding the promise of Concurrent Mode

Concurrent Mode lets React work on multiple versions of our UI at once, showing older versions that are still fully interactive until newer versions are ready. This can mean there are brief periods when the latest state doesn’t match the current UI in the browser and React gives us some hooks and components to manage the feedback we give to our users. The aim is to improve the user experience of our apps, making them feel more responsive and orchestrating updates so our users immediately understand what is stale, what is updating and what is fresh.

Concurrent Mode is still experimental, so the two new hooks we introduce in this chapter, useTransition and useDeferredValue, are experimental too. They give React permission to keep showing old UI or old values while components load new data or calculate new values. This helps us avoid receded states where the UI falls back from a useful, interactive component to a previous loading state.

13.1   Making smoother transitions between states

13.1.1   Avoiding receded states with useTransition

13.1.2   Giving users feedback with isPending

13.1.3   Integrating transitions with common components

13.1.4   Holding on to old values with useDeferredValue

13.2   Using SuspenseList to manage multiple fallbacks

13.2.1   Showing data from multiple sources

13.2.2   Controlling multiple fallbacks with SuspenseList

13.3   Concurrent Mode and the future

13.4   Summary