UseTransition Hook

When building interactive user Interfaces, performance is a key aspect. If your app is slow or not responsive most users are going to leave the website immediately. One way to improve the performance of React application is by using the useTransition hook.

Let us see a simple React application to understand useTransistion hook in a better way.

import { useState } from "react";

export default function App() {
  const [input,setInput] = useState('')
  const [list,setList] = useState([])

  const handleChange = (e) =>{
    setInput(e.target.value)
    const lis=[]
    for(let i=0;i<10000;i++){
      lis.push(e.target.value) 
    }
    setList(lis)
  }
  return (
    <div>
     <input onChange={handleChange} value={input}/>
     {list.map((l)=>{
       return <div>{l}</div>
     })}
    </div>
  );
}

we have 2 piece of states, one is used to store input text value that we enter in the input field, and the other state is used to store a list of values.

Every time when we change the value in the input field it calls the handleChange method. The handle change method does the following tasks: 1) first, it sets the input field value to the input state. 2) second we declare an empty list and after that, it will loop through 10000 times to add the input state to a temporary list and finally we add the temporary list to the list state.

so the secondary task has a lot of data and really time-consuming computation. If we run this application and type in the input field you notice it's very sluggish. It took a long time to display content on screen and we need to fix this problem.

To fix this problem we need to understand what is going on. Let's see how React works, when we make a state change ( for example consider setInput and setList state changes ) it tries to combine together all the different state changes that we make into one call and then it's going to make them all at once before rerendering our application. In our application, it is going to combine together our setInput and setList states. our setList takes a long time because it has gone through a massive for-loop and adds a bunch of elements to the list and then rerenders all those elements to the screen.

Due to this React behavior rendering out change for setInput and setList is very slow. To fasten this behavior we can set the input state to have higher priority, which runs ahead of time, and setList which is slow run at a later time because it has much lower priority. That's what useTransistion allows us to do. we rank the states based on their importance.

useTransistion gives us an array of values. isPending: a boolean indicating whether the transition is currently in progress or not. startTransition: a function that can be used to start the transition.

import {useTransition} from 'react'

const [isPending,startTransition] = useTransition()

By default, all state changes in React are high priority and they all run one after the other until they all are finished and then it's going to render out to the screen. what we can do is we can wrap the second task in the handle change method using startTransistion function and say to React that it is low priority task and we will only render it out only if we have time.

import { useState,useTransition } from "react";

export default function App() {
  const [input,setInput] = useState('')
  const [list,setList] = useState([])
  const [isPending,startTransition] = useTransition()

  const handleChange = (e) =>{
    setInput(e.target.value)
    startTransition(()=>{
      const lis=[]
      for(let i=0;i<10000;i++){
        lis.push(e.target.value) 
      }
      setList(lis)
    })
  }
  return (
    <div>
     <input onChange={handleChange} value={input}/>
     {list.map((l)=>{
       return <div>{l}</div>
     })}
    </div>
  );
}

As soon as high priority task (setInput) is done it will render to the screen and then a little bit later when lower-priority stuff is done the list is shown on the screen. By doing like this we can increase the performance of React app.

we should have to use useTransistion when we absolutely need it because by using useTransistion we are making our app to do more renders. Before using useTransistion hook our app only render once when input was changed and when we used useTransistion hook our application did two separate renders one where one for the input changed and the other when the list is changed.

It was recommended to use this hook when you are specifically running into performance issues. Hope this blog is very helpful.

Thank you :)