React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison

Рет қаралды 10,760

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
React v18 Hooks include useTransition and useDeferredValue. This tutorial compares useTransition vs useDeferredValue and gives examples of how they can work together, too. Learn React 18 hooks now!
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
📬 Course Updates ➜ courses.davegray.codes/
🔗Source Code: github.com/gitdagray/react_us...
React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison
(00:00) Intro
(00:22) Welcome
(00:34) Starter Code
(01:26) Example without useTransition
(03:21) Applying useTransition
(06:23) useTransition = two renders. Don't abuse.
(06:55) useTransition vs useDeferredValue
(08:34) Practical example of useTransition with useDeferredValue
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 React useTransition docs: reactjs.org/docs/hooks-refere...
🔗 React useDeferredValue docs: reactjs.org/docs/hooks-refere...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this React v18 Hooks intro to useTransition and useDeferredValue helpful? If so, please share. Let me know your thoughts in the comments.
#react #usetransition #usedeferredvalue

Пікірлер: 49

@DaveGrayTeachesCode 2 жыл бұрын

React 18 includes the new hooks useTransition and useDeferredValue. Both of these hooks are based on concurrency. They can be useful, but they shouldn't be used all of the time. We'll look at both how to use and when to use these new hooks. If you are new to React, I recommend starting with my React JS for Beginners full course here: kzfaq.info/get/bejne/iLx2dNx3vLWYl6M.html

@Jorgeee 2 жыл бұрын

Been lurking on your channel for a couple of hours. I'm very impressed by the amount of content and quality produced. Looking forward to the Discord server!

@DaveGrayTeachesCode 2 жыл бұрын

Welcome aboard! And thank you for the kind words! 🙏

@muhammadharoon8264 2 жыл бұрын

Best channel i ever seen on KZfaq. Dave makes so simple to understand. Keep it up dude

@DaveGrayTeachesCode 2 жыл бұрын

Thank you for the kind words, Muhammad! 🙏💯

@abdulazeez.98 11 ай бұрын

Awesome. The best video I saw regarding this topic

@xandrsurf2234 2 жыл бұрын

Thank you, Dave) Very clearly explained

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome, Xandr! 💯

@ahmad-murery 2 жыл бұрын

Nice video, Thanks Dave, you always come to the rescue. Now I think I need to re-evaluate my react-abilities 🤔😎

@DaveGrayTeachesCode 2 жыл бұрын

Thank you, Ahmad. 🙏 I have no doubt that your programming abilities are excellent my friend 💯

@ahmad-murery 2 жыл бұрын

@@DaveGrayTeachesCode Sometimes my 2.5 brain cells stop and need a kick to start again, especially when so many things pull you back and lower your motivations. Thanks to you my friend👍

@StanleySathler 2 жыл бұрын

You're awesome, Dave! Thanks!

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome, Stanley! 🙏

@SkyrimBeast Жыл бұрын

The useTransition hook strikes me as a way to manipulate the DOM after it's fully rendered. Thanks for these video's Dave, I've been watching your content for several months now.

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful!

@kishoreandra 2 жыл бұрын

Thanks for the video Dave ... Would love to see a series wherein - How to do things in React + - general scenarios / use cases - filter / sort - pagination - infinite scrolling - search functionality ( debounce technique) - lazy loading stuff - file upload - validations using form Many more .... I have gone through the login authentication series ... My goodness 😍 huge respect Dave 🙏💯 -

@DaveGrayTeachesCode 2 жыл бұрын

Great suggestion! I like this list and I will work to fit these topics in! 💯🙏

@kishoreandra 2 жыл бұрын

@@DaveGrayTeachesCode Amazing Dave, Thank you 😍 ... Intention is most of the jobs have similar functionalities to implement more or less, you know better than me 😄 ...

@ambrosebeavers Жыл бұрын

Wonderful!

@DaveGrayTeachesCode Жыл бұрын

Thank you!

@hungnguyencanh5089 2 жыл бұрын

Greate content and very clearly. I hope in the near future there will be a video on how to make a real project. Thank you so much!

@DaveGrayTeachesCode 2 жыл бұрын

Thank you! 🙏 Yes, MERN project coming soon - after a short vacation 🌴

@hungnguyencanh5089 2 жыл бұрын

@@DaveGrayTeachesCode Nice :D Waiting for this 🤩☺️

@dharmeshgohil9375 2 жыл бұрын

One word awesome

@DaveGrayTeachesCode 2 жыл бұрын

Thank you, Dharmesh! 🙏

@user-te2pe5qm8o Жыл бұрын

I feel that the difference between them is similar to useMemo and useCallback, only the application scenario is different, and they can be used together technically but not reasonable.

@sonamohialdin3376 2 жыл бұрын

So good tutorial

@DaveGrayTeachesCode 2 жыл бұрын

Thank you, Sona! 💯

@sonamohialdin3376 2 жыл бұрын

@@DaveGrayTeachesCode You are welcome

@KochharAmandeep 2 жыл бұрын

Hi Dave, can i get the name of your vs code theme?

@DaveGrayTeachesCode 2 жыл бұрын

Sure! Github theme - several dark mode options in it.

@learn029 2 жыл бұрын

I can't able to install create react app with yarn which step of command i have to follow

@DaveGrayTeachesCode 2 жыл бұрын

Keval, follow the instructions shown here: reactjs.org/docs/create-a-new-react-app.html

@michaelvigato3228 2 жыл бұрын

I wonder if these can be somehow used to debounce API calls / to implement a simpler version of a useDebouce hook

@DaveGrayTeachesCode 2 жыл бұрын

Absolutely. That is essentially what I am doing in Example 2 in this video except I use it to debounce a search filter instead of an API request.

@michaelvigato3228 2 жыл бұрын

@@DaveGrayTeachesCode but if that was an actual API request, wouldn’t it still hit the endpoint N times if the user input N characters ?

@DaveGrayTeachesCode 2 жыл бұрын

@@michaelvigato3228 yes, it would. An actual debounce gives you more control, but this is similar in some ways.

@owenlilly3634 2 жыл бұрын

What's the name of your VSCode theme?

@DaveGrayTeachesCode 2 жыл бұрын

Github theme 🚀

@owenlilly3634 2 жыл бұрын

@@DaveGrayTeachesCode awesome, thanks!

@antonarbus Жыл бұрын

Do we really need the "startTransition" function inside "useEffect" in practical example? useEffect already depends on "deferredInput", which itself tells the react to execute its callback with lower priority. A bit confused between these two hooks, looks like they duplicate each other. Devs, please explain.

@DaveGrayTeachesCode Жыл бұрын

Just one example. I suggest playing around with it and experimenting to best learn how it works. It's new. More examples will surely come too.

@user-te2pe5qm8o Жыл бұрын

useMemo is a good way to achieve the same goal

@eugenepranoto3824 2 жыл бұрын

So how to fix the backspace search problem?

@DaveGrayTeachesCode 2 жыл бұрын

The fewer characters, the more records this example has to filter through. This is true both typing forwards and when removing characters.

@eugenepranoto3824 2 жыл бұрын

@@DaveGrayTeachesCode I mean like when u r typing forward quickly. Its only show the final text such as "222", but when u r removing character its show every text from " 22" "2" "" -> the final text How to make the console log only show the final text for backward typing?

@DaveGrayTeachesCode 2 жыл бұрын

@@eugenepranoto3824 it is due to not having as many records to filter when you have typed more characters. Therefore, going backwards, it gets the results faster to slower. When you start with no characters typed, it is slower to faster so you are able to type more before the app responds.

@dardanillyr3989 2 жыл бұрын

Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?

@DaveGrayTeachesCode 2 жыл бұрын

I am launching a Discord near the end of this month (June 2022). I hope to build a community that is helpful. I do not have the extra time to help with viewer's projects on my own.