useTransition() vs useDeferredValue | React 18

React 18 introduces "Concurrency" - an extremely important new concept. Along with that, two key new hooks were added: useTransition() and useDeferredValue(). Both hooks help with (de-)prioritzing state updates but when should you use which hook?
This video explains both hooks in great detail and shows a complete example.

----------

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[saskirakosyan]

<li >should be separated component, not ul, becouse ul is one but li a lot. If you change and do the same, you will see the difference, regarding performance. Thanks 👍

[OopsNextLevel]

@academind

in code at 7:21 we should'n wrap setFilterTerm with startTransition, Since startTransition de prioritize the taks, user will definitely feel laggy behaviour. I think we should just wrap that filterProduct function call.

Like :

function App () {
const [isPending, startTransition] = useTransition();
const [listitems, setItems] = useState(filterProducts(""));
const [filterTerm, setFilterTerm] = useState("");

function updateFilterHandler(event) {
const value = event.target.value;
setFilterTerm(value);
}

useEffect(() => {
startTransition(() => {
const listitems = filterProducts(filterTerm);
setItems(listitems);
});
}, [filterTerm]);


//// just pass the listitems to the ProductList component


}

[yangwang]

Thanks for your video. Just one quick question here: if we use the controlled input component like this <input type="text" value={filterTerm} />, the laggy issue is still there. So I am not quite sure why we don't use controlled component as an example to explain how useTransition works?

[RideTheTeacups]

This is an incredible explanation. Thank you!

[muhammadtouhiduzzaman]

Thanks Max. things are bit cleaner now ❤

[markoarsenal]

Great video, man!
I still don't get what are use cases for useDeferredValue. You mentioned when we don't have control in the example of the products
but also there we can have local state for products and update those within the useEffect using useTransition hook.

Something like this:

const Products = ({ products }) => {
const [localProducts, setLocalProducts] = useState(products);
const [isPending, startTransition] = useTransition();

useEffect(() => {
startTransition(() => {
setLocalProducts(products);
});
}, [products])
}

[jasonkk]

Couldnt this problem also be solved by denouncing the search value? And maybe use memo to re render the rows when debounce value changes ?

[waleedsharif]

could you possibly make a video to how convert existing project which uses webpack 4 to use webpack 5 ?

[Qa]

is this useTransition hook kind of debounce function?

[dhruvdutta]

Make react 18 updates video on udemy to the course react that u have already

[johnconnor]

Add this videos to your Udemy courses too please :)

[bugs]

Something important to note about this example is that his <input> is an 'uncontrolled' component. Meaning that he doesn't set its 'value' prop to be synchronized with the 'filterTerm' state value. If this were the case, then the input field and the filtered lists would have the same priority, whether useTransition is used or not, due to them being tied to the same state value. With the uncontrolled input field, when typing into it, its new value is rendered immediately and does NOT depend on the React component re-rendering to show the new input value.

The example from the React docs for useDeferredValue shows what I think is the better way to handle this example of a list with a filter query; with a combination of useState, useDeferredValue, and useMemo.

[baka_baca]

Great video! I love how React and its community just keep cranking out innovations to solve meaningful problems. For work reasons, I had to switch over to Vue for the past couple of years and have been out of the loop, but the more I catch up on what I missed the happier I am overall. The React core team keeps cranking out awesome primitives and the community keeps cranking out awesome ways to use them.

[yadusolparterre]

So that means that useTransition adds one more rendering ? Am I right?

[mikemalone]

Thank you so much for this, sir! I took the liberty of creating a proof of concept to demonstrate this new set of features to my development team! The startTransition() function we get from the useTransition hook certainly made a difference you can feel in the responsiveness of the input text field. I wrote my example using TypeScript and a Material UI Card component to display cards with images, titles and descriptions. I wanted to really stress the capabilities of this hook with UI elements that contained images and a full data set. It really made a huge difference in the user experience.

Once again, you have given back to the community with your wonderful explanations and videos with great visual appeal. Thank you!

[RanjanKumar-buws]

Thanks for the video, it was really blurry when I came to know about the upcoming concurrent mode in React, this tutorial makes things clear and how it will change React

[ekcans]

Thank you. Just a quik note. As I understand - it is better to create filterTerm deferredValue and avoid extra list filtering.

[nicklesseos]

Can you make a video about streams, buffers and pipes in nodejs?

[ngwasedrickmeh]

Thanks for sharing. These updates seem like throttling and debouncing on a new level

[jamshediqbal]

Super detailed explanation with easy understanding. Thank you Max!