13 Experimenting with useTransition, useDeferredValue, and SuspenseList

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 that, for brief periods, 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, whereby 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

Summary