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.