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.
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.
@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 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.
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!
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 :)
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
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.
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 (
); }; 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
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.
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.
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.
"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 )
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.
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.
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
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.
I see a lot of people having doubts after watching this video. Please watch this video instead - ua-cam.com/video/N5R6NL3UE7I/v-deo.html . All your doubts will be cleared.
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.
@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 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.
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!
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 :)
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
Thanks for sharing. These updates seem like throttling and debouncing on a new level
Thank you. Just a quik note. As I understand - it is better to create filterTerm deferredValue and avoid extra list filtering.
Super detailed explanation with easy understanding. Thank you Max!
As usual Max makes things simple
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.
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.
This is an incredible explanation. Thank you!
You are best teacher...
Thanks Max. things are bit cleaner now ❤
Very helpful nice and easy understanding. Thank you Max
So that means that useTransition adds one more rendering ? Am I right?
wow sir, Its really a amazing explation about the topics :)
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
Hi Max,
brew install --cask keycastr
😀
Great video!!! Thank you so much for such excelent explication!!
It was really helpful for me. Thank you, Max❤️
Couldnt this problem also be solved by denouncing the search value? And maybe use memo to re render the rows when debounce value changes ?
Can you make a video about streams, buffers and pipes in nodejs?
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".
How would it be different if instead of doing the low priority state updates in a setTimeout() as opposed to the startTransition() function?
Great explanation
Thank you for the explanation. I was having a hard time understanding the difference.
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.
I do not find useTransition in React ^18.0.0. How can I activate it in package.json?
Thank you for this fantastic video!!
good video for react18 start
Can we have a similar experience with lodash denounce?
Like always, great content! Thanks
cool workaround to not being able to use multi-threading in a browser environment...well there's for ui display but that sucks.
is it updated too in udemy course?
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.
Thanks for this exciting video.. is there similarity in using debounce & useTransition method?
I am pretty sure that it has the debounce underhood :D
What is the best filter function in this stuation guys ? especially by using reduce.
Wonderful Video
What if we use both at the same time?
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.
Dear Max would you please update your svelte course in Udemy cause of the latest update of svelte kit? thank you❤
could you possibly make a video to how convert existing project which uses webpack 4 to use webpack 5 ?
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 ?
Thanks for you videos, Please share such videos for vue js
You are gem man.
"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" =))
you are the best.
Super helpful!
Thank you, Max ❤️🎉
why not debounce input and filtering
After watching video, I still don't know what is special about useTransition() vs useDeferredValue() ???
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.
best video!
Wow, thanks for the video.
Thank you Max :)
cool features!
Thank you very much
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.
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!
听不懂，有没有中文版
Thanks
Make react 18 updates video on udemy to the course react that u have already
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.
Thanks so much
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.
thank you :).
Big tutor
useDebounce will be lesser used now i guess :)
❤️
For me react it seems to be full of patch...
Add this videos to your Udemy courses too please :)
Nice 👍🏿
🙌🙌🙌🙌🙌
How to show u have a super fast OS without telling u have a super fast OS
НАВІЩО ПОВТОРЮВАТИ ОДНЕ Й ТЕ Ж САМЕ ПО ДЕСЯТЬ РАЗІВ???
I see a lot of people having doubts after watching this video. Please watch this video instead - ua-cam.com/video/N5R6NL3UE7I/v-deo.html . All your doubts will be cleared.
Should have been max 3 minutes video
như đầu buồi
Debounce anyone?