useTransition hook in React 18

useTransition hook in React 18

useTransition hook is introduced in the latest version of React which is React 18. This hook allows us to set lower priority on certain state updates. Since by default in react all the state updates have high priority.

Before diving deep let’s try to understand concurrent rendering in react.

React 18 was released in March 2022. This release focuses on performance improvements and updating the rendering engine.

React 18 sets the foundation for concurrent rendering APIs that future React features will be built on top of.

Concurrent Rendering

Before React 18 rendering was a single,uninterrupted and synchronised transaction once the rendering had started but In React 18 concurrent rendering was introduced which states that React can interrupt,pause,resume or abandon a render. This allows React to respond to the user quickly even if it is in the middle of a heavy rendering task.

To understand concurrency, let’s consider this example by Dan Abramov from React 18 Working group discussions.

Let’s say that we need to call two people – Alice and Bob. In a non-concurrent setting, we can only have one call at a time. We would first call Alice, end the call, and then call Bob.

This is fine when calls are short, but if a call with Alice has a long waiting period (such as on-hold), this can be a time sink.

Image showing that in a typical non-concurrent phone conversation, you have to wait for a call to be over before starting a new call.

In a concurrent setting, we could call Alice and, once we were put on hold, we could then call Bob.

This doesn’t mean that we are talking to two people at the same time. It just means that we can have two or more concurrent calls at the same time and decide which call is more important.

Image showing phone conversation between Alice and Bob can be concurrent, by placing a call on hold and answering a more urgent call with Bob first.

useTransition

useTransition is a hook for transition. It returns the transition state and a function to start the transition.

When calling useTransition(), you get back an array with exactly two elements: An isPending boolean value, telling you whether the low-priority state update is still pending, and a startTransition() function that can be wrapped around a state update to tell React, that it is a low-priority update.

Let’s try to understand it with an example:

In the above example, we have created two states’ input and list. By default, the size of the list is 10001, and have created a handle change function every time we change our input we are gonna set the input to value type by the user and loop through to the size of the list and add the same value to the list.

When we run this code we see that it is very slow and the value of input on the input box appears after some interval of time.This happens because react tries to update all the state in one call. In the function handleChange the react try to update setInput and setList in one call but our setList takes so long since it has to go through a massive loop which makes our application slow.

To fix this we use useTransition Hook.It will set a higher priority for setInput and lower priority for setList.Here how we can do it.

First import useTransition from react and this useTransition hook will give us an array of two elements isPending and startTransition.

So all the state changes inside the startTransition hook are set to lower priority.

So this is how we can do it.

So now when we change the value of input it appears on the input box immediately and the list is shown after sometime since we have set it priority to be low. This is how we can optimise our application.