React useTransition Hook

In this part, we will learn about react useTransition hook. React useTransition is used to boost our application performance and makes it even faster. useTransition and useDeferredValue are the hooks which used to render the complex logic or bigger data very speedy, so user experience won’t get compromised. Here we will focus on useTransition hook and then after we will go for useDeferredValue hook.

You may find out similarity between useTransition and useDeferredValue hook, to be honest there is very minor difference between these two, so we will see in next article.

What Exactly React useTransition Hook Does?

useTransition hook can be used to tell react about which state is less important to run or with lower priority. This is why React won’t render these lower priority state with other higher priority state. Result is higher performance and less lag on the important states like user input field.

Syntax

const [isPending, startTransition] = useTransition();

Here, isPending is a boolean value, and used to tell where lower priority states are still pending or not. startTransition function is used to tell react which state update we want to defer.

Example For React useTransition Hook

Let’s jump into example to understand this react useTransition hook, First let’s see a program without useTransition

Example without React useTransition

import React, {useState} from 'react';

function App(){
	const [input, setInput] = useState("")
	const [list, setList] = useState([])

	const List_Size = 20000

	function handleChange(e){
		setInput(e.target.value)
		const l =[]
		for(let i= 0; i< List_Size; i++){
			l.push(e.target.value)
		}
		setList(l)
	}
	return(
		<>
			<input type="text" value={input} onChange={handleChange}/>
			{list.map((item, index)=> {
				return <div key={index}>{item}</div>
			})}
		</>
	);
}
	
export default App;

So here we have created a heavy loaded working application where we have an input field, in which, if user writes something it will be printed like, 20000 times. As we can see, rendering any text like 20000 times is too big application where obviously application going to take massive buffer. If you run this same code, And try to write anything in the input field, then you will see a massive lag while writing. So here our input field should have higher priority than rendering the text, 20000 times.

Output

In the output while you write something, then you will see that if you write something in input field then you will face lag. Basically, this thing is also depending on your pc performance as well.

Now let’s what will change if you use the useTransition Hook:

Example Using react useTransition Hook

import React, {useState, useTransition} from 'react';

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

	const List_Size = 20000

	function handleChange(e){
		setInput(e.target.value)
		startTransition(()=>{ 
			const l =[]
			for(let i= 0; i< List_Size; i++){
				l.push(e.target.value)
			}
			setList(l)})
	}
	return(
		<>
			<input type="text" value={input} onChange={handleChange}/>
			{isPending ? "Loading...." : list.map((item, index)=> {
				return <div key={index}>{item}</div>
			})}
		</>
	);
}
	
export default App;

Now we have implemented react useTransition hook in our application. In here we have put the list in t startTransition, So react will know that whatever wrote in startTransition has lower priority and outside that function having higher priority. So react won’t run these two things parallel, instead setInput will run first without lag.

Here, isPending is a boolean value where if it is true then we can see “loading…” text while we are writing once it get finished we are rendering the text here.

Output

You can check out this output by running the above code, and you will see the difference between these two at rendering time. When we’re writing in the input field, then it will run smoothly, but again you will see some lag when the result starts to render. We can use this hook at very large application where you want to achieve great user experience.

Check out video reference here: