Hello. This is the first time to write an article in English. and now I am not English guy and not good at English yet. I’m writing this to improve my English. That’s why there would be lots of things wrong grammarly. so please bear with me!

and now let’s get down to business!

Why do you need useTransition hook?

Let’s assume you update some states in React like below.

function App() {
  const [inputValue, setInputValue] = useState("")
  const [inputValueLength, setInputValueLength] = useState(0)
	
	const handleChange = () => {
			const {value} = e.target;
	    setInputValue(value)
	    setInputValueLength(value.length)
	}

  return <input type="text" value={inputValue} onChange={handleChange} />
}

When you see that code, you would find out that there is no problem for it.

Actually, React has a feature known as concurrency, which is the most important thing in React. Concurrency can be defined as the ability to do numerous tasks at the same time. Thanks to this feature, no matter how many states there are to update, it render a component only one time.

That’s why, in this case, there is no problem as you expected because only one time a component is rendered for the concept of concurrency.

What’s the problem?

Let’s assume if there is a state to be updated for a long time.

A component will not happen to re-render before the task is finished. Obviously It could cause a serious bad experience if there are heavy updating states , which take long times and lead to slow rendering components.

What’s the solution for this?

You can deal with this problem using newly introduced hook, which is “useTransition”, which is a new hook introduced by React 18..

It’s like giving a task which will take a long time lower priority so that users get better responsiveness.

useTransition Example Code

function App() {
  const [isPending, startTransition] = useTransition()
  const [inputValue, setInputValue] = useState("")
  const [inputValueLength, setInputValueLength] = useState(0)

  function handleChange(e) {
    setName(e.target.value)

    startTransition(() => {
      setList(largeList.filter(item => item.name.includes(e.target.value)))
    })
  }

	const handleChange = () => {
			const {value} = e.target;
	    setInputValue(value)
			setInputValueLength(length)

			startTransition(()=>{
		    // code that takes long time....
			})
	}

  return 
	<>
    <input type="text" value={inputValue} onChange={handleChange} />
    {isPending ? (
      <div>Loading...</div>
    ) : (
      // ... code some elements related to codes in the function of "startTransition"
    )}
  </>
}

the “useTransition” Hook returns an array that has two elements. They are “isPending” and “startTransition”.

“isPending” return boolean value if the code inside the “startTransition” is running. “startTransition” handles codes related to the slow state update.

Conclusion

The “useTransition” makes very slow and clunky state updates you feel so laggy much more easier and comfortable by telling React to prioritize more important updates .