useTransition Hook in React

We will see one of the features that the new version 18 of React brings. It's the useTransition hook.

It is an essential feature since it allows us to prioritize React DOM updates over others, making the interface much more fluid.

For example, when updating an input and a long list with many items, we may experience delays in updating the input and not have a smooth experience if we don't apply this.

Prioritizing updates for a smooth interface

Let's first talk about React's default updates.

When React wants to update, it performs a synchronous render, which means that we are blocking the interface while it is rendering.

With this new feature, what happens is that we can mark updates as low priority. It means that when React starts to update these, every 5 ms, it checks for more essential task updates, delaying low-priority updates and prioritizing high-priority ones.

That is great!

Let's give an example.

Example

We have text input to search for authors in a giant list.

The list should be updated every time we write something to the input. Because the list is enormous, if we didn't use this new feature, every time we clicked on the entry, we would block the interface for a while until the list was fully updated. And we couldn't write fluently on the input.

However, we have applied the hook. In this way, we prioritize the update of the input. And deprioritize the update of the state that the list uses to update itself through the useTransition, as we can see in the following image:

This way, we get a fluid application without including external libraries!

Conclusion

Thanks to the new useTransition hook, we can manage to prioritize DOM updates in React straightforwardly. We no longer need to incorporate external libraries such as debounce or do full implementations to achieve this. We already have it integrated with React 18!

---

Here, I share two helpful resources that also talk about this topic. I highly recommend them if you want to delve deeper into the topic and want to know more about other new features that React 18 has brought:

https://vercel.com/blog/how-react-18-improves-application-performance

https://react.dev/reference/react/useTransition

---

I hope you enjoyed the article.

Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.

If you have any questions, feel free to contact me on LinkedIn, Edi Rodriguez, or leave a comment in the post.

See you in the next post.

Have a great day!