Тёмный

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

Dave Gray
Подписаться 314 тыс.
Просмотров 32 тыс.
50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to lazy load code in React with this code splitting tutorial. Why load the code for an admin dashboard if your user is not an admin? With React.lazy, you can use code splitting to increase the performance of your React app.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: bit.ly/AdvReactDev
- The Complete Web Developer: bit.ly/WebDevMaster
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/react-lazy
React Lazy Load Code | React Code Splitting Tutorial
(00:00) Intro
(00:11) Welcome
(00:33) Starter Code
(00:48) Example App Overview
(02:43) React Router App structure
(04:30) Applying React lazy
(05:52) React lazy requirements
(06:35) Applying React Suspense
(07:27) Applying an Error Boundary
(12:11) Check component loading in dev mode
(14:05) Deployment Performance
📺 Suggested Videos:
🔗 React Suspense & Error Boundaries: • Write Clean Code with ...
🔗 Skeleton Loading Components: • Skeleton Loading Compo...
📚 Tutorial References:
🔗 React Docs - lazy: beta.reactjs.org/reference/re...
🔗 react-error-boundary: www.npmjs.com/package/react-e...
Was this React Lazy Load & Code Splitting tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #lazy #load

Опубликовано:

 

18 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 79   
@voice_famous_books4301
@voice_famous_books4301 6 месяцев назад
We have a lot of good teachers for teaching programming but you are the best:)
@thedevelopermind
@thedevelopermind Год назад
You are a great teacher, Dave! Thanks for this priceless videos.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@blainenye7049
@blainenye7049 Год назад
Well done Dave! Very clear and to the point.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you!
@osiris9843
@osiris9843 4 месяца назад
You are a great teacher, sir...
@devkumar9889
@devkumar9889 Год назад
What a coincidence, I learnt this just now in my course 😂 , and I think this one is even in more detail .
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Nice!
@MOJICA7257
@MOJICA7257 Год назад
Thanks! Dave for another great content.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@fikilekentane6982
@fikilekentane6982 7 месяцев назад
tnx Dave, u awsome 🙏
@andre-wv9eg
@andre-wv9eg 5 месяцев назад
Thanks for tutorial sir
@mrbilchalan
@mrbilchalan Год назад
in role based applications, its very much useful. thank u. thanks a lot.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@agus-wesly
@agus-wesly Год назад
Thx Dave, I learn a lot from your videos
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Glad to hear that!
@kamichikora6035
@kamichikora6035 Год назад
This is why I love this channel... Is always useful and practical
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Glad to hear it!
@IamPali2024
@IamPali2024 4 месяца назад
Criminally underrated 👏👏👏👏
@djt6fan
@djt6fan Год назад
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 Год назад
Thank you and thanks for the request!
@khalilbenmeziane8836
@khalilbenmeziane8836 Год назад
thank you mr dave keep going 👍🥰
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@dopetag
@dopetag Год назад
Thanks, Dave!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Welcome!
@Hacking-NASSA-with-HTML
@Hacking-NASSA-with-HTML Год назад
Thank you so much sir🤝 Your work is very impressive👍❤
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@Web-Himansu
@Web-Himansu Год назад
Your voice is calm,clean and beautiful voice and I learn deeply from your Video textbooks .
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you! 😃
@TravinskiyVladislav
@TravinskiyVladislav Год назад
Thank you, Dave
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You're welcome!
@sahaneakanayaka3394
@sahaneakanayaka3394 Год назад
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 Год назад
Thank you! You can search my channel from the channel homepage. I have a few tutorials on different deployments. Here is one of them: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--I_6kVPrX2o.html
@Web-Himansu
@Web-Himansu Год назад
Your quotes is always remember "keep striving for progress, not perfection ".
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Right on! 💯
@sonamohialdin3376
@sonamohialdin3376 Год назад
Thank you for the useful tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
You are welcome!
@Arshi728
@Arshi728 Год назад
It would be great if you do full fledge video on making scalable app using all these advanced React concepts
@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!
@willyhorizont8672
@willyhorizont8672 Год назад
Yeay in depth review of React.lazy and React.Suspense 🚀🚀🚀🚀
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Right on! This video uses React Suspense because React.lazy requires it, but I cover Suspense in depth in a separate video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1_dLaSjzOMY.html
@willyhorizont8672
@willyhorizont8672 Год назад
@@DaveGrayTeachesCode I know. I watch the Suspense video a lil while. now with this its complete. Thanks Dave!! 🚀🚀🚀
@maroinealarabi1473
@maroinealarabi1473 Год назад
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
@ivankraev4264
@ivankraev4264 8 месяцев назад
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 ?
@hardwired89
@hardwired89 Год назад
Thank you for the lesson sir, next maybe react unit testing async form
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you for the request!
@Alex-bc3xe
@Alex-bc3xe Год назад
God bless this man is awesome.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Glad it helped!
@shinpaingmin603
@shinpaingmin603 6 месяцев назад
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 Год назад
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 Год назад
Thank you for the request!
@yabuking84
@yabuking84 Месяц назад
when do onReset executes?
@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: ru-vid.comMDaxWffMjrQ
@abdullahalani1188
@abdullahalani1188 Год назад
@@DaveGrayTeachesCode Thanks a lot!
@onur-9158
@onur-9158 Год назад
what to do with my lader and action ?
@danushkap
@danushkap Год назад
Hi Dave, Could you kindly do a video series on "React Native" Thanks so much.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you for the request! I do want to cover React Native sometime this year 😀
@danushkap
@danushkap Год назад
😁 Oh! Thanks so much Dave..
@aishanstha
@aishanstha Год назад
if there is a way we could wrap lazy-suspense for various providers like: redux, context API etc?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
It works well with SWR. Check documentation for your API layer of choice.
@aishanstha
@aishanstha Год назад
@@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🙏
@rakaa31
@rakaa31 Год назад
please make videos with facecam as it keeps us more engaging
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Check the community tab on my channel for my recent survey about this.
@michaelscofield2469
@michaelscofield2469 Год назад
Plase make videos about webpack and babel, if you have knowledge
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
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 Год назад
@@DaveGrayTeachesCode Thank you
@waleedsharif618
@waleedsharif618 Год назад
@@DaveGrayTeachesCode also Nextjs does not use webpack
@krunalshrimali4471
@krunalshrimali4471 Год назад
What is error boundary used for ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
The video I recommend on React Suspense and Error Boundaries covers it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1_dLaSjzOMY.html
@krunalshrimali4471
@krunalshrimali4471 Год назад
Thanks
@TheTomislavb
@TheTomislavb Год назад
Great video but there is a glitch when navigating to the admin page for the first time
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
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 Год назад
​@@DaveGrayTeachesCode I know, the Skeleton component is shown for a really short time. Too bad this looks like a glitch
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
@@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 Год назад
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. 🎨 🔵🏃‍♂🏃‍♂🏃‍♂
Далее
OMG! Bei der Hochzeit betrogen 😨 #tricks
00:43
Просмотров 1,7 млн
How To Load Images Like A Pro
15:48
Просмотров 357 тыс.
3 React Mistakes, 1 App Killer
14:00
Просмотров 113 тыс.
You are loading Images wrong! Use this instead 😍
14:41
React Typescript Tutorial for Beginners
28:24
Просмотров 73 тыс.
These Mistakes Slow Down Your React App!
11:38
Просмотров 40 тыс.
A better image reset for your CSS
11:16
Просмотров 107 тыс.
Stop Doing this as a React Developer
12:27
Просмотров 159 тыс.