useTransition vs useDeferredValue hook | React 18 | What is Concurrent React | Anuj Singla

useTransition vs useDeferredValue hook | React 18 | What is Concurrent React | Anuj Singla
In this video, I have explained Concurrency, useTransition, and useDeferredValue concepts. React has added these features in 18 versions.

useTransition vs useDeferredValue hook | React 18 | What is Concurrent React | Anuj Singla

Topics covered:
React 18 concept
What is Concurrency in React js
What is useTransition Hook
What is useDeferredValue Hook
How is useDefferedValue different from debouncing?
What is the difference between useDefferedValue and useTransition hook?
Practical example

⏰ Timecodes ⏰
0:00 Introduction
0:27 What is Concurrency in React js
6:07 What is useTransition Hook
7:57 What is useDeferredValue Hook
9:37 How is useDefferedValue different from debouncing?
10:27 Difference between useDefferedValue and useTransition hook?
12:27 Practical example
39:07 Conclusion

Concurrency Means:
React 18 added a new concept: Concurrency. Concurrency helps to update multiple tasks
simultaneously by prioritizing the tasks. We can prioritize state updates
like low priority or high priority state updates.

Explained By Dan Abramov -

useTransition hook:
Transitions are a new concurrent feature introduced in React 18 to distinguish
between urgent and non-urgent updates.
Urgent updates like typing, clicking, pressing, etc.
Non-urgent updates like UI updates on some state updates.
Example: You filter the product list on search. Typing in the input box to search
product is an urgent state update and shows the filtered product in a non-urgent state.
React added this feature to improve the User experience.

React added hook for this:
const [isPending, startTransition] = useTransition();
isPending - state for pending transition.
startTransition - function to start the transition.

startTransition(() = {
setCount(count + 1);
})

useDeferredValue() hook

useTransition() hook gives us the control to make the state a low priority.
useDeferredValue lets you defer (postpone) re-rendering a non-urgent part
of the tree.
It is the same as debouncing. There is no fixed time delay. React will render the
deferred value as soon as other work is finished (the first render is reflected on the
screen). It does not block user input.

How is useDefferedValue different from debouncing?

Debouncing has a fixed artificial delay, no matter other system is fast
or slow. useDeferredValue add lags as per system. On a fast machine, the lag
is less and on a slow device is a high lag and noticeable.

What is the difference between useDefferedValue and useTransition hook?

useTransition hook wrap the updating state and useDefferedValue wrap a value
that is affected by state updates.
We should not use both hooks at the same time because both provide the solution
for the same problem.
Don't overuse this feature for all state updates. We should only use
where we need like complex user interface.
We should keep other performance improvements like lazy loading,
pagination or other performance optimization techniques.

(Free Courses)

(Social Media Links)
About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, and Typescript. I want to teach web development to everybody.
Tags :-
#useTransition #useFeferredValue #react #anujsingla #typescript #hindi #html #css

[sandeepkamra]

Sir, I have a doubt that while searching we use api and in that case we use useDebounce, so in which case we use these three methods?