React Lazy Load Code to Load Faster | React Code Splitting Tutorial

  Рет қаралды 40,128

Dave Gray

Dave Gray

Күн бұрын

Пікірлер: 78
@devkumar9889
@devkumar9889 2 жыл бұрын
What a coincidence, I learnt this just now in my course 😂 , and I think this one is even in more detail .
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Nice!
@voice_famous_books4301
@voice_famous_books4301 Жыл бұрын
We have a lot of good teachers for teaching programming but you are the best:)
@thedevelopermind
@thedevelopermind 2 жыл бұрын
You are a great teacher, Dave! Thanks for this priceless videos.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@Web-Himansu
@Web-Himansu 2 жыл бұрын
Your quotes is always remember "keep striving for progress, not perfection ".
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Right on! 💯
@Web-Himansu
@Web-Himansu 2 жыл бұрын
Your voice is calm,clean and beautiful voice and I learn deeply from your Video textbooks .
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! 😃
@mrbilchalan
@mrbilchalan 2 жыл бұрын
in role based applications, its very much useful. thank u. thanks a lot.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@agus-wesly
@agus-wesly 2 жыл бұрын
Thx Dave, I learn a lot from your videos
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that!
@sahaneakanayaka3394
@sahaneakanayaka3394 2 жыл бұрын
Another great tutorial Dave... I have a small request though. Would you like to create a tutorial on how to deploy web apps. Different options for deploying web apps, security concerns etc. There are not much tutorials on deployment process, if you can create one that is definitely going to help 🙏🙏❤
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! You can search my channel from the channel homepage. I have a few tutorials on different deployments. Here is one of them: kzbin.info/www/bejne/Y3rCZ56MhdeLaNE
@djt6fan
@djt6fan 2 жыл бұрын
Hey Dave, I love your teaching style and your explanations are clear, I would like to make a request, and I'm sure many would appreciate it if you could find some time to do this: would it be possible for you to create a course akin to data structures and algorithms, or at least something similar to that, teaching us how to approach a problem from a programmer's standpoint? I have learned a great deal about web dev from your videos, but I feel I still lack the logic when I approach a logical problem in JavaScript problem, or any language at that. Would it even be possible to teach this using JS, since most such courses are in C/C++? Love your work, keep doing what you're doing!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you and thanks for the request!
@blainenye7049
@blainenye7049 Жыл бұрын
Well done Dave! Very clear and to the point.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@osiris9843
@osiris9843 Жыл бұрын
You are a great teacher, sir...
@ghulammujtaba9236
@ghulammujtaba9236 Жыл бұрын
I kept receiving warnings in the app to add Error Boundary. Now I know what to do. Awesome tutorial.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear it helped!
@kamichikora6035
@kamichikora6035 2 жыл бұрын
This is why I love this channel... Is always useful and practical
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear it!
@dopetag
@dopetag 2 жыл бұрын
Thanks, Dave!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Welcome!
@MOJICA7257
@MOJICA7257 2 жыл бұрын
Thanks! Dave for another great content.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@khalilbenmeziane8836
@khalilbenmeziane8836 2 жыл бұрын
thank you mr dave keep going 👍🥰
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@Hacking-NASSA-with-HTML
@Hacking-NASSA-with-HTML 2 жыл бұрын
Thank you so much sir🤝 Your work is very impressive👍❤
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@IamPali2024
@IamPali2024 11 ай бұрын
Criminally underrated 👏👏👏👏
@TravinskiyVladislav
@TravinskiyVladislav 2 жыл бұрын
Thank you, Dave
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@willyhorizont8672
@willyhorizont8672 2 жыл бұрын
Yeay in depth review of React.lazy and React.Suspense 🚀🚀🚀🚀
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Right on! This video uses React Suspense because React.lazy requires it, but I cover Suspense in depth in a separate video here: kzbin.info/www/bejne/Z5DHfZSJn9-Cg7s
@willyhorizont8672
@willyhorizont8672 2 жыл бұрын
@@DaveGrayTeachesCode I know. I watch the Suspense video a lil while. now with this its complete. Thanks Dave!! 🚀🚀🚀
@Arshi728
@Arshi728 Жыл бұрын
It would be great if you do full fledge video on making scalable app using all these advanced React concepts
@maroinealarabi1473
@maroinealarabi1473 2 жыл бұрын
Hey Dave I have a recommendation about web development freelancing if you have an experience or info about it to make some videos how the process goes from a to z best wishes tnx for your effort you put in the channel
@fikilekentane6982
@fikilekentane6982 Жыл бұрын
tnx Dave, u awsome 🙏
@hardwired66
@hardwired66 Жыл бұрын
Thank you for the lesson sir, next maybe react unit testing async form
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you for the request!
@shinpaingmin603
@shinpaingmin603 Жыл бұрын
Sir, can you explain me the difference between Blurhash for image lazy loading and code splitting. If I use code splitting, do I still need to use Blurhash and vice versa.
@sohitmodi9743
@sohitmodi9743 2 жыл бұрын
Hey Adrian recommended me to watch your videos for getting updated with latest React features that is brilliant.. I have 1 request it would be great if you do it. Can you make a video on React-boilerplate ??? With (React, rtk, routing, API integration _common file) I promise I will share personally to 80-100 peoples in my company.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the request!
@andre-wv9eg
@andre-wv9eg Жыл бұрын
Thanks for tutorial sir
@rakaa31
@rakaa31 2 жыл бұрын
please make videos with facecam as it keeps us more engaging
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Check the community tab on my channel for my recent survey about this.
@abdullahalani1188
@abdullahalani1188 Жыл бұрын
Great explanation Dave! Also could you please give me the name of the extension that shows the lines from the opening to the closing brackets around the code block? Min 9:30 onwards
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
No extension needed. Here's how to set it up: kzbin.infoMDaxWffMjrQ
@abdullahalani1188
@abdullahalani1188 Жыл бұрын
@@DaveGrayTeachesCode Thanks a lot!
@yabuking84
@yabuking84 8 ай бұрын
when do onReset executes?
@ivankraev4264
@ivankraev4264 Жыл бұрын
Great, I have one question If I want to navigate from home page to about page (which is lazy loaded), and while about page is being resolved, to remain on the. home page and show some loading overlay, how can I do that ?
@danushkap
@danushkap 2 жыл бұрын
Hi Dave, Could you kindly do a video series on "React Native" Thanks so much.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you for the request! I do want to cover React Native sometime this year 😀
@danushkap
@danushkap 2 жыл бұрын
😁 Oh! Thanks so much Dave..
@aishanstha
@aishanstha 2 жыл бұрын
if there is a way we could wrap lazy-suspense for various providers like: redux, context API etc?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
It works well with SWR. Check documentation for your API layer of choice.
@aishanstha
@aishanstha 2 жыл бұрын
@@DaveGrayTeachesCode i got messed trying to use lazy on my named exports😁 Really appreciate if could make a continue video onto it in future with uses of redux providers n other named exports providers. Thanks🙏
@onur-9158
@onur-9158 Жыл бұрын
what to do with my lader and action ?
@SanthoshBhoopal
@SanthoshBhoopal 4 ай бұрын
Does SSR make this obsolete?
@michaelscofield2469
@michaelscofield2469 2 жыл бұрын
Plase make videos about webpack and babel, if you have knowledge
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Good tool topics! They are often used "under the hood" when we build a project - for example, when a React project is built with "npm run build". However, Vite does not use webpack. Read more here: vitejs.dev/guide/why.html ...You can play around with Babel here: babeljs.io/
@michaelscofield2469
@michaelscofield2469 2 жыл бұрын
@@DaveGrayTeachesCode Thank you
@waleedsharif618
@waleedsharif618 2 жыл бұрын
@@DaveGrayTeachesCode also Nextjs does not use webpack
@krunalshrimali4471
@krunalshrimali4471 2 жыл бұрын
What is error boundary used for ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
The video I recommend on React Suspense and Error Boundaries covers it here: kzbin.info/www/bejne/Z5DHfZSJn9-Cg7s
@krunalshrimali4471
@krunalshrimali4471 2 жыл бұрын
Thanks
@TheTomislavb
@TheTomislavb 2 жыл бұрын
Great video but there is a glitch when navigating to the admin page for the first time
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
What you are seeing - very briefly if it seems like a glitch - is the component Suspense provides while loading the admin area. This would likely take longer when loading a true admin dashboard or other larger amount of code.
@TheTomislavb
@TheTomislavb 2 жыл бұрын
​@@DaveGrayTeachesCode I know, the Skeleton component is shown for a really short time. Too bad this looks like a glitch
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
@@TheTomislavb Just understanding the concept is what is important here. In a deployed app, it would likely take longer to load and not be such a brief flash. It works as intended.
@augustineudeh1584
@augustineudeh1584 2 жыл бұрын
First here
@khitibhusannaik1471
@khitibhusannaik1471 Жыл бұрын
Hello Sir, I learned these things from you, 1- html 2- css 3- tailwindcss 4- javascript 5- react 6- git/github now I want to start some freelancing can I start my freelancing and prepare for more advanced web development journey for companies with this. 🎨 🔵🏃‍♂🏃‍♂🏃‍♂
@sonamohialdin3376
@sonamohialdin3376 2 жыл бұрын
Thank you for the useful tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You are welcome!
React Debounce Search Input API Call | useDebounce React Hook
16:09
Setup React 19 using Create-React-App
2:37
WebStylePress
Рет қаралды 9 М.
小丑女COCO的审判。#天使 #小丑 #超人不会飞
00:53
超人不会飞
Рет қаралды 16 МЛН
It works #beatbox #tiktok
00:34
BeatboxJCOP
Рет қаралды 41 МЛН
3 Ways to Make React App FASTER
14:43
Piyush Garg
Рет қаралды 53 М.
Speed Up Your React Apps With Code Splitting
16:50
Web Dev Simplified
Рет қаралды 401 М.
Code Splitting in React JS - Lazy Loading Performance Optimization
16:10
You are loading Images wrong! Use this instead 😍
14:41
CoderOne
Рет қаралды 223 М.
How To Load Images Like A Pro
15:48
Web Dev Simplified
Рет қаралды 395 М.
Data Fetching using React Suspense and Error Boundary - React Data Fetching Patterns.
34:32
I just tried o3-mini
6:31
ThePrimeTime
Рет қаралды 233 М.
8 React Js performance optimization techniques YOU HAVE TO KNOW!
11:23
小丑女COCO的审判。#天使 #小丑 #超人不会飞
00:53
超人不会飞
Рет қаралды 16 МЛН