In this post, we will demonstrate what are react 18 hooks useTransition and useDeferredValue and how can we use them to improve our app performance.
The version 18 of React was released a few months ago, which means that we are not breaking new ground, reading and exploring what's new in the updated version is good but what's much better to involve it in a practical application.
So let's begin our journey.
Assume you have a list of employees in your database and you make API requests to filter those employees by name.
If the number of employees is huge and the data is not returned paginated from the server-side or the server capability is limited or any other reason, You may run into trouble. This can result in the app appearing sluggish when filtering employees.
let's mockup this process.
Here, we have implemented an input that takes the name of an employee to display it inside the input box and to filter through the employees' array at the same time.
The result of this filtering process is unsatisfactory. It takes a long time to display the characters in the search box, as well as to display the results. This delay becomes even more obvious when typing many characters simultaneously, The process can take multiple seconds, which is a significant amount of time.
⚠️if the GIF not loaded view it from HERE
useTransition()
This is where useTransition() comes into play.
useTransition() can be used to tell React that certain state updates have a lower priority (i.e., all other state updates or UI rendering triggers have a higher priority).
These state updates will be executed in parallel with other state updates, but the rendering of the component will not wait for these less important state updates.
When calling useTransition(), you get back an array with exactly two elements: An isPending boolean value, telling you whether the low-priority state update is still pending (we can use it to show a spinner while data is processing), and a startTransition() function that can be wrapped around a state update to tell React, that it is a low-priority update.
To make the app more responsive, we need to set a lower priority for listing the employees so that it doesn't delay the display of characters in the search box.
So We will wrap the setState of the employees array "setEmployeesList" in startTransition() callback function as follows:
Here, we are telling React that "setEmployeesList" is a low-priority state. This is to ensure that it does not cause any delay to other states, including the UI rendering triggers.
⚠️if the GIF not loaded view it from HERE
useDeferredValue()
We can achieve the same result using useDeferredValue.
The useDeferredValue hook allows us to fix this slow render problem by implementing a delay before some information is calculated.
So that our deferred value will only be calculated after the important state updates have finished running.
However, the difference is that useDeferredValue() is used to wrap values (states), not setter functions (setStates). If you have a component that takes a prop from a parent component or accesses global state (where you don't have control of the state and only access the value), then useDeferredValue() can be used in this scenario.
for example:
Conclusion:
Both of useTransition and useDeferredValue are using to low-prioritize some updates.
The difference is that useTransition() wraps the state updating code, whilst useDeferredValue() wraps a value that's affected by the state update. You don't need to (and shouldn't) use both together, since they achieve the same goal in the end.
Instead, it makes sense to prefer useTransition(), if you have some state update that should be treated with a lower priority and you have access to the state updating code. If you don't have that access or you're accessing third-party library for example, use useDeferredValue().
Feel free to write your thoughts in the comments section👇🏼
Have a Good day.
Top comments (0)