useTransition() vs useDeferredValue | React 18

[@bugs389]

Something important to note about this example is that his 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.

[@manou1409]

+1

[@大盗江南]

got this from chatgpt: The `useTransition` hook in React is used to animate changes in a component's state. It can be used with uncontrolled input fields, but it's important to note that the animation will only occur when the component's state changes. In the case of an uncontrolled input field, the value of the input is not managed by React state, but rather by the DOM. Therefore, if you want to animate changes to the input field, you'll need to manually trigger a state change in your component. One approach to achieve this is to use the `onChange` event of the input field to update a state variable in your component. Then, you can use the `useTransition` hook to animate changes to that state variable.

[@RanjanKumar-bu7ws]

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

[@ngwasedrickmeh2464]

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

[@django-unchained]

Finally someone just talking straight on point all the time as a professional talking to professionals. Instant sub on this channel. Very good to have on the side at work :)

[@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.

[@mikemalone4867]

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!

[@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 }

[@jamshediqbal7936]

Super detailed explanation with easy understanding. Thank you Max!

[@ekcans]

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

[@saskirakosyan5268]

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 👍

[@RavirajParab]

As usual Max makes things simple

[@RideTheTeacups]

This is an incredible explanation. Thank you!

[@vinothkumarv9722]

wow sir, Its really a amazing explation about the topics :)

[@piekepoke]

Hi Max, brew install --cask keycastr 😀

[@muhammadtouhiduzzaman7491]

Thanks Max. things are bit cleaner now ❤

[@arslanahmed5137]

Very helpful nice and easy understanding. Thank you Max

[@MarcelPirosca]

Thank you for the explanation. I was having a hard time understanding the difference.

[@arunbm123]

You are best teacher...

[@yangwang24]

Thanks for your video. Just one quick question here: if we use the controlled input component like this , 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?

[@ugljesavojvodic3384]

You are right. My recommend is to try to set one more state within this handler, but out of setTransition, and expose that state on the screen. You will see that it will update that state first on the screen (the new one, that you added out of startTransition), and only after the transitioned one is done, it will then be updated on the screen. But notice something interesting. When you set handler as I recommend, put one console log in the root of the main component where the setTransition is used. You will notice that the main component is going to do automating batching (setting new states) one after another witch will cause two renders of that component, one for transitioned and one for non-transitioned set-states.

[@ammariqbal8363]

It was really helpful for me. Thank you, Max❤️

[@ashharkausar413]

Great explanation

[@potrosanjuan]

Great video!!! Thank you so much for such excelent explication!!

[@shinobi_coder88]

6:29 - When I changed to 50000 from 100000, the app stopped working. That means when it comes to a real app, we still need to implement pagination as well right? When I run Google Lighthouse for both with and without useTransition() the Performance results are just the same.

[@vickyvxr]

Thank you for this fantastic video!!

[@xieyusheng6732]

good video for react18 start

[@luizamendes]

Like always, great content! Thanks

[@yadusolparterre]

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

[@ajth-in]

Can we have a similar experience with lodash denounce?

[@amirtorabi3978]

Thanks for you videos, Please share such videos for vue js

[@hououinkyouma5372]

This is a great feature, but I'm afraid calling it concurrency might not be accurate. React is basically just *delaying* all logic and state updates inside startTransition() till it's parent function has finished execution or startTransition() just executes asynchronously, is how I perceive it. This behavior could certainly be replicated, but it's nice to have it as a built-in feature. Thank you for the video. Edit: It appears I'm wrong. Even making state updates asynchronous doesn't necessarily change the DOM updation priority unless you use setTimeout() or something. This feature is much smarter :)

[@ooogabooga5111]

i think they went with concurrency because it supports and helps to write efficient code to the existing ones ( the laggy code which is concurrent in execution). You can't input something and update at the same time uk. Its like read and write, u can't read unless u are done writing.

[@rozrewolwerowanyrewolwer391]

When you have slow js code it will block main loop and whole UI. I think that startTransition somehow creates new thread? Maybe webworker?

[@nikolamiticdev]

@@rozrewolwerowanyrewolwer391 In their docs they mentioned that work is being offloaded from the main thread. But not the "where" and "how".

[@avendeep]

Thank you, Max ❤️🎉

[@romankostiuk]

If I am not mistaken this is not correct explenation/ We should wrap the setter for list items in startTransition function to make our input work little bit better and more responsive but not the input setter import { useTransition, useState, ChangeEvent, useEffect } from "react"; const products = Array(10000) .fill("") .map((_, index) => `Product ${index + 1}`); const filterItems = (filterTerm: string) => { if (!filterTerm) return products; return products.filter((p: string) => p.includes(filterTerm)); }; const CuncarentMode = () => { const [isPending, startTransition] = useTransition(); const [search, setSearch] = useState(""); const [filteredProducts, setFilteredProducts] = useState(products); const filterHandler = (e: ChangeEvent) => { setSearch(e.target.value); }; useEffect(() => { startTransition(() => setFilteredProducts(filterItems(search))); }, [search]); return ( Cuncarent Mode Search output: {search} {isPending && "IS PENDING"} {filteredProducts.map((product) => { return {product}; })} ); }; export default CuncarentMode; Try it out Why we should do it like this because user works with input more focused and list will updates with lags any way.

[@nicklesseos]

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

[@arijitghosh6378]

How would it be different if instead of doing the low priority state updates in a setTimeout() as opposed to the startTransition() function?

[@Isiakaabd]

Thanks for this exciting video.. is there similarity in using debounce & useTransition method?

[@stepanostapuk4120]

I am pretty sure that it has the debounce underhood :D

[@ogzhn]

What is the best filter function in this stuation guys ? especially by using reduce.

[@thierryleriche1196]

I do not find useTransition in React ^18.0.0. How can I activate it in package.json?

[@jasonkk8050]

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

[@Abdosaad-t1j]

Wonderful Video

[@gonzaotc]

I'm wrong or there is missing an useMemo() for the productList with the defferedValue?, because f we don't memorize the component, any state update in the parent will trigger a re-render in the children anyway

[@waleedsharif618]

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

[@nro337]

Super helpful!

[@blyatMail]

is it updated too in udemy course?

[@PhilipAlexanderHassialis]

"It's not a good idea to work on 10000 items at a time" Cries in my customer demands that they want to see all 250k of items they have as SKUs in their inventory... ("use filters" "no, I don't want to use filters, I want to scroll down and look it up on my own, as if you expect my users to remember the exact thing they are looking for when they search up a specific product" - true friggin' story btw :S )

[@Ahmed-my4tl]

u can do infinite scroll

haha, my japanese customer once gave me the same requirement, plus "support IE11" =))

[@cristiannasirabadi8593]

What if we use both at the same time?

[@markoarsenal3]

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]) }

[@yitzchalfari2426]

Maybe creating a whole new state and a useEffect to update that state just to use useTransition is not efficient? But yea it's also unclear to me what exactly useDeferredValue does.

[@Q99a]

is this useTransition hook kind of debounce function?

[@yitzchalfari2426]

Debouncing an input filter is usually used in order to prevent unnecessary calls to an api, here everything is on the client which on a slow CPU concludes as lag. My first thought here was also debounce but that's not what's happening.

[@kranthikumar5215]

You are gem man.

[@rameshn8397]

Thanks for this video. Can you please create a video series or a course with Type Script React along with creating JSON driven react application ?

[@TheIguana3d]

Wow, thanks for the video.

[@thomaswaldorf2829]

Thank you Max :)

[@davidardo4466]

Hi Max, there was no one to answer me. I hope you answer me. Is mathematics important in programming or not? Can you do better when math is bad?

[@academind]

It's not required. The ability to think logically is.

[@telmuun1748]

Thank you very much

[@fatemeghazian5211]

Dear Max would you please update your svelte course in Udemy cause of the latest update of svelte kit? thank you❤

[@mrala]

why not debounce input and filtering

[@sudhanshusharma9159]

you are the best.

[@andygr1n1]

cool features!

[@jasonsebring3983]

cool workaround to not being able to use multi-threading in a browser environment...well there's for ui display but that sucks.

[@HuyKon]

After watching video, I still don't know what is special about useTransition() vs useDeferredValue() ???

[@DipaGoodGame]

Thanks so much

[@alii4334]

best video!

[@sercanbozkurt1]

Thanks

[@Shuyinz]

Is it me, or do I feel useTransition is just abstracting away to code like a traditional input debounce technique?

[@gskgrek]

debounce is time relevant (you set time for debounce when it should update) while useTransition depends directly on render cycle. But if react team would introduce optional time attribute for the useDefferedValue hook it could be used like a normal debounce

[@Shuyinz]

@@gskgrek makes sense!

[@vishwaskhurana1217]

I see a lot of people having doubts after watching this video. Please watch this video instead - kzbin.info/www/bejne/hGa1Z4GCaLp4bas . All your doubts will be cleared.

[@nikolamiticdev]

And it happens again, now we need to wait for "some time to pass" for the best practices to emerge. Sounds like useEffect drama about to start. Love React but not all of their core team decisions.

[@Darkurge666]

Is there a reason you're using function over arrow functions?

[@RanjanKumar-bu7ws]

Probably due to that weird behaviour of "this" i guess

[@lucasterable]

In this case it is a style choice

[@mustaneerhaider515]

Inside FC, it doesn't matter if you create fucntions with funtion keyword or you use arrow functions but using arrow funtions is preferred more inside a class based component and as a modern way fo writing funcs.

[@xiangminghui1269]

听不懂，有没有中文版

[@kadirookirim3231]

thank you :).

[@dhruvdutta9105]

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

[@dumbdevprogramming8793]

useDebounce will be lesser used now i guess :)

[@johnconnor9787]

Add this videos to your Udemy courses too please :)

[@moniruzzamansaikat]

🙌🙌🙌🙌🙌

[@zombie3790]

Nice 👍🏿

[@Thilina4321]

❤️

[@sarkhanrahimli8740]

Big tutor

[@m4ttheweric]

I love React but man sometimes it feels like they just keep slapping tape over leaks and then making you feel like it’s an upgrade.

[@valikonen]

For me react it seems to be full of patch...

[@SayedHelmyMix]

[@MrCuteguylol]

How to show u have a super fast OS without telling u have a super fast OS

[@mighty_osaker]

НАВІЩО ПОВТОРЮВАТИ ОДНЕ Й ТЕ Ж САМЕ ПО ДЕСЯТЬ РАЗІВ???

[@huyhieunguyen1995]

như đầu buồi

[@kishorays]

Should have been max 3 minutes video

[@yitzchalfari2426]

Debounce anyone?