Avoiding blocking UI with the Transition Hook

The Transition Hook lets you handle asynchronous operations by updating state without blocking the UI. This is especially useful for rendering computationally expensive component trees, such as rendering tabs and their (potentially complex) contents, or when making a client-side router. The Transition Hook has the following signature:

const [isPending, startTransition] = useTransition()

The isPending state can be used to handle the loading state. The startTransition function allows us to pass a function to start the transition. This function needs to be synchronous. While the updates (for example, setting state) triggered inside the functions are being executed and their effects on components evaluated, isPending will be set to true. This does not block the UI in any way, so other components still behave normally while the transition is executing.

Using the Transition Hook

We are now going to use the Transition Hook to...