Standalone Search Box Example

React 18 new useTransition Hook Explained

Community Manager

React 18 had introduced many new features and new Hooks from which 2 are mostly used and 5 are used by library and framework developers, the new hooks are as followed:

1) useDeferredValue

2) useTransition

3) useId

4) useSyncExternalStore

5) useInsertionEffect


From which we are going to discuss about useTransition Hook today.


Before knowing about what is useTransition and what it does we need to know the problems developers/ users faced with react. Let us know about it with an example.




Let us consider we are developing a eCommerce application and we are now implementing search products page, Just for example lets think we are not using any optimization techniques here, When a user searches for a product all the products with the name and related names will be fetched and displayed in the search bar searches list, as we are not using any optimization techniques all the matched data is returned and displayed, Let us assume for a search "Laptop" we got 20000 results so now to load all those results into search bar list it will take some time in seconds for react right, In the mean time if we clear the search bar example we have changed mind tot just search for "Dell Laptop" when we clear the input bar it will not clear immediately as react is busy in loading those previous 20000 results, So the result is no response for user.


Now we have got an idea of whats the problem right so React 18 brings a solution for this problem by using useTransition Hook we can tell React which processes are not much important so React will complete first Important process, hence in the previous example now when a user tries to clear search input and type new input they will face no lag / non-responsiveness, as input box process is considered more important than loading search results.


I hope this blog makes it clear of new hook useTransition.


1 Comment
Version history
Last update:
Updated by: