useTransition() vs useDeferredValue | React 18
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- 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.
Full tutorial article: academind.com/...
Video demo app starting code: github.com/aca...
Finished code: github.com/aca...
Learn all about (the latest version of) React with my "Complete Guide" course: acad.link/reactjs
----------
Join our Academind Community on Discord: academind.com/...
Check out all our other courses: academind.com/...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
![[TH] FS vs BME - VCT Ascension Pacific - Lower Bracket Final](http://i.ytimg.com/vi/wnygqsR2Fig/mqdefault.jpg)
@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
}
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 👍
Great explanation
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])
}
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.
could you possibly make a video to how convert existing project which uses webpack 4 to use webpack 5 ?
What if we use both at the same time?
is this useTransition hook kind of debounce function?
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.
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.
+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.
So that means that useTransition adds one more rendering ? Am I right?
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.
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
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?
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.
НАВІЩО ПОВТОРЮВАТИ ОДНЕ Й ТЕ Ж САМЕ ПО ДЕСЯТЬ РАЗІВ???
cool workaround to not being able to use multi-threading in a browser environment...well there's for ui display but that sucks.
I see a lot of people having doubts after watching this video. Please watch this video instead - th-cam.com/video/N5R6NL3UE7I/w-d-xo.html . All your doubts will be cleared.
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.
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.
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.
wow sir, Its really a amazing explation about the topics :)
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!
How to show u have a super fast OS without telling u have a super fast OS
Thank you. Just a quik note. As I understand - it is better to create filterTerm deferredValue and avoid extra list filtering.
Can we have a similar experience with lodash denounce?
Hi Max,
brew install --cask keycastr
😀
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
"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 )
u can do infinite scroll
haha, my japanese customer once gave me the same requirement, plus "support IE11" =))
Add this videos to your Udemy courses too please :)
Can you make a video about streams, buffers and pipes in nodejs?
why not debounce input and filtering
Should have been max 3 minutes video
useDebounce will be lesser used now i guess :)
Thanks for sharing. These updates seem like throttling and debouncing on a new level
Thanks for this exciting video.. is there similarity in using debounce & useTransition method?
I am pretty sure that it has the debounce underhood :D
Super detailed explanation with easy understanding. Thank you Max!
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 :)
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.
When you have slow js code it will block main loop and whole UI. I think that startTransition somehow creates new thread? Maybe webworker?
@@rozrewolwerowanyrewolwer391 In their docs they mentioned that work is being offloaded from the main thread. But not the "where" and "how".
This is an incredible explanation. Thank you!
听不懂，有没有中文版
After watching video, I still don't know what is special about useTransition() vs useDeferredValue() ???
You are best teacher...
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.
you are the best.
Dear Max would you please update your svelte course in Udemy cause of the latest update of svelte kit? thank you❤
How would it be different if instead of doing the low priority state updates in a setTimeout() as opposed to the startTransition() function?
Couldnt this problem also be solved by denouncing the search value? And maybe use memo to re render the rows when debounce value changes ?
I do not find useTransition in React ^18.0.0. How can I activate it in package.json?
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 ?
best video!
Big tutor
Great video!!! Thank you so much for such excelent explication!!
What is the best filter function in this stuation guys ? especially by using reduce.
Make react 18 updates video on udemy to the course react that u have already
Thanks for you videos, Please share such videos for vue js
Very helpful nice and easy understanding. Thank you Max
Thank you for the explanation. I was having a hard time understanding the difference.
Super helpful!
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?
It's not required. The ability to think logically is.
Thank you for this fantastic video!!
Thanks Max. things are bit cleaner now ❤
Like always, great content! Thanks
For me react it seems to be full of patch...
It was really helpful for me. Thank you, Max❤️
is it updated too in udemy course?
good video for react18 start
Wow, thanks for the video.
Is it me, or do I feel useTransition is just abstracting away to code like a traditional input debounce technique?
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
@@gskgrek makes sense!
As usual Max makes things simple
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 :)
Thank you very much
Thank you, Max ❤️🎉
thank you :).
You are gem man.
cool features!
Thank you Max :)
Thanks so much
Thanks
🙌🙌🙌🙌🙌
❤️
Nice 👍🏿
Debounce anyone?
Is there a reason you're using function over arrow functions?
Probably due to that weird behaviour of "this" i guess
In this case it is a style choice
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.