Code Splitting in React JS - Lazy Loading Performance Optimization

  Рет қаралды 94,566

RoadsideCoder

RoadsideCoder

Күн бұрын

Пікірлер: 94
@GarmrZero13
@GarmrZero13 2 жыл бұрын
I've implemented lazy and suspense into some of my projects before, but i never head of the error boundary. Big thanks for explaining it!
@vp351
@vp351 Жыл бұрын
but what if we want to load the component after specific time for example 5 sec.. bcoz lazy loading does not provide that feature..
@keyjeyelpi
@keyjeyelpi Жыл бұрын
​@@vp351well, it is still possible though. You could create a boolean that turns true after 5 seconds, which will in turn, load the lazy loaded component after 5 seconds.
@soumyadeepdawn481
@soumyadeepdawn481 2 жыл бұрын
Hey. Seriously. Thank you. I just downloaded soft and I can CLEARLY see why your vid was recomnded. You're an aweso intro into
@Android-17
@Android-17 Жыл бұрын
Thank you for explaining the error boundary part. Excellent video!
@ashish_prajapati_tr
@ashish_prajapati_tr 2 жыл бұрын
i am already using it for long time. it's amazing
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
That's Great!
@fffooccc9801
@fffooccc9801 2 жыл бұрын
@@RoadsideCoder BHAIYA APKA VS CODE KA LAYOUT SETTING ACHA HAI SHARE KR SAKTE HO KAISE APPLY KIYA?
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
For theme, I use peacock extension
@fffooccc9801
@fffooccc9801 2 жыл бұрын
@@RoadsideCoder and font?
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Default
@VishalKumar-mi6ed
@VishalKumar-mi6ed Жыл бұрын
The way you have explained the things is really nice, you just gained a new subscriber ❤
@ayushjain7023
@ayushjain7023 2 жыл бұрын
Videos like these are really helpful and the way you have explained the things is really nice, you just gained a subscriber ❤️
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Thanks for subbing!
@Lohitpant
@Lohitpant 2 жыл бұрын
I was asked Code Splitting in an interview.
@codewithsaj9270
@codewithsaj9270 Жыл бұрын
Me too
@Dev-Phantom
@Dev-Phantom 2 жыл бұрын
very conceptual , maza aa gaya
@adityaakhare3519
@adityaakhare3519 2 жыл бұрын
thnx a lot for lazy loading and error boundary concept i am gonna implementing this to my project
@shaiksameer2776
@shaiksameer2776 7 ай бұрын
aap purush nahi ho, punya purosh ho, excellent
@muzamillkhan9747
@muzamillkhan9747 2 жыл бұрын
Thanks man keep posting these kind of videos..
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
I will 🙏
@sohamgohel7000
@sohamgohel7000 4 ай бұрын
15:00 both page are different before they check only loclhost:3000 after they check other page that why performance is not increase
@ViewerGaunt
@ViewerGaunt 2 жыл бұрын
I don't think you're testing the same endpoints for both lighthouse tests. / Vs / coins...
@mattoattacko
@mattoattacko 2 жыл бұрын
Video was very helpful. Thanks mate
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Glad to hear that
@gideonmanasa3193
@gideonmanasa3193 2 жыл бұрын
Great video thanks 🙌🏾🙌🏾🙌🏾
@TravelwithPujarini
@TravelwithPujarini 2 жыл бұрын
Great video. 🔥
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Thanks 🙏
@rohanthakran4225
@rohanthakran4225 Жыл бұрын
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
@anto_deejay
@anto_deejay 2 жыл бұрын
nice tuto Thank you!
@A9kit.k
@A9kit.k 2 жыл бұрын
Great brother 👏🏻👏🏻
@aniketshukla6095
@aniketshukla6095 2 жыл бұрын
All the best,
@viktorkasap
@viktorkasap Жыл бұрын
Cool, but what can we do if we need to keep the previous content before loading the next one? I mean, you click on a nav link, then a progress bar shows the loading process while the content is still on the page. After the next page content loads, the old content is replaced with the new content.
@vaibhavjaiswal1309
@vaibhavjaiswal1309 28 күн бұрын
this is fine but while putting this things in deployment we are getting chunk load error how to resolve that
@vp351
@vp351 Жыл бұрын
but what if we want to load the component after specific time for example 5 sec.. bcoz lazy loading does not provide that feature..
@rafahadenkar
@rafahadenkar 2 жыл бұрын
Amazing !!
@roopeshsingh3211
@roopeshsingh3211 2 жыл бұрын
Amazing teaching
@v1xbetlive531
@v1xbetlive531 Жыл бұрын
i have watched your video and it is very helpful for me, i have cloned the code but banner.js and homepage is not importing and output is not displaying what should i do please help for my intership
@eminresulzade2444
@eminresulzade2444 2 жыл бұрын
Thank u so much man great video. I had a question.Is it ok to add react lazy to all components?
@ahmadfaraz3678
@ahmadfaraz3678 2 жыл бұрын
Helpful video
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Glad to hear that
@HSBTechYT
@HSBTechYT 2 жыл бұрын
Another reason to use next js instead of react js 🙏
@regilearn2138
@regilearn2138 2 жыл бұрын
please do a MERN stack project with typescript
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
definetly
@technicalspot1848
@technicalspot1848 2 жыл бұрын
Bhai issue. Yeh hai ki code spllitted compnets lod hi nahi hote toh kya kre
@roxxman3484
@roxxman3484 2 жыл бұрын
Bro how to safeguard our web servers like in MERN stack from Slow Loris attack or some other attacks like Ddos and something?
@saitejagatadi9711
@saitejagatadi9711 7 ай бұрын
Bhai, then with webpack also we can do code splitting?
@pranupranav6279
@pranupranav6279 2 жыл бұрын
Wow.
@pranupranav6279
@pranupranav6279 2 жыл бұрын
This is optimization is next level optimization.
@caricatureadda3867
@caricatureadda3867 2 жыл бұрын
Nice tutorial, has react become seo friendly its showing 100% against SEO
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Thanks!
@pkmkb_0
@pkmkb_0 2 жыл бұрын
He used CRA it seems
@nestorcanales2341
@nestorcanales2341 2 жыл бұрын
great video, but can you use it in a SSR using react, webpack, babel please
@arcadan
@arcadan 2 жыл бұрын
I wonder why my routes is not getting splitted when i run build, it seems the same as not using lazy strategy, has someone faced the same as me? would someone tell me what could be the problem? (im using react 17, and its CRA)
@ravi_verma31
@ravi_verma31 Жыл бұрын
great
@saikumargatla4706
@saikumargatla4706 10 ай бұрын
Infinite scrolling pe bhi ekk video banao
@RoadsideCoder
@RoadsideCoder 10 ай бұрын
sure
@mrrishiraj88
@mrrishiraj88 2 жыл бұрын
Thanks
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Welcome
@thedullilama6767
@thedullilama6767 2 жыл бұрын
You are awesome
@chineduabalogu
@chineduabalogu 2 жыл бұрын
Appreciate you for this video! more grease to your elbows
@hamzashaikh9164
@hamzashaikh9164 2 жыл бұрын
Great videos 🤯🔥
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Thanks 🤟
@PIYUSH-lz1zq
@PIYUSH-lz1zq 2 жыл бұрын
Bhaiya can you provide us MERN stack interview questions sheet 🖤
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Yea sure
@ahmadfaraz3678
@ahmadfaraz3678 2 жыл бұрын
Which will be the next topic?
@Codewithjs8
@Codewithjs8 2 жыл бұрын
Sir please upload olx clone tutorial
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Added to the list
@Codewithjs8
@Codewithjs8 2 жыл бұрын
Where was added it sir
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
I mean my personal list of video ideas 😄
@Codewithjs8
@Codewithjs8 2 жыл бұрын
Haaa haaa 🤣😂 I am waiting for your olx clone tutorial sir
@sanjeevchaurasia4819
@sanjeevchaurasia4819 2 жыл бұрын
Can we lazy load a context? Like component
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Probably not
@emreozgun3846
@emreozgun3846 2 жыл бұрын
@@RoadsideCoder what about lazy loading a nested route ? (like in react-router v6)
@niklausmikaelson7332
@niklausmikaelson7332 2 жыл бұрын
Bhai Redux ka tutorial bana do easy jo samjh aa jay
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Already bana rakha h.
@niklausmikaelson7332
@niklausmikaelson7332 2 жыл бұрын
@@RoadsideCoder kya lastest me mapstateprop and dispatch wala function use nhi hota hai mene codewith harry ka dekha tha usme nhi tha
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Yes ab hum mostly functional approach use krte hai, with useSelector and useDispatch hooks. But u can use old approach as well.
@shubhamdubey9577
@shubhamdubey9577 2 жыл бұрын
Sir ye project complete ho gya kya mujhe mere clg me meajor project me dena hai
@RoadsideCoder
@RoadsideCoder 2 жыл бұрын
Yes completed
@Dev-Phantom
@Dev-Phantom Жыл бұрын
cool, very interesting
@preet3167
@preet3167 2 жыл бұрын
But I have a problem
@alexandrupruteanu6532
@alexandrupruteanu6532 Жыл бұрын
for me lazy,Suspense nat working.
@streeetvlooger9744
@streeetvlooger9744 2 жыл бұрын
sadly im with you a year later lol
@emreozgun3846
@emreozgun3846 2 жыл бұрын
I presume that the reason of the shitty performance is css-in-js ?
@v1xbetlive531
@v1xbetlive531 Жыл бұрын
i have watched your video and it is very helpful for me, i have cloned the code but banner.js and homepage is not importing and output is not displaying what should i do please help for my intership
@Saurabhkumar-ps5zp
@Saurabhkumar-ps5zp Жыл бұрын
Thanks
@sumitkumardey3268
@sumitkumardey3268 5 ай бұрын
Great
@hemantvardani1436
@hemantvardani1436 6 ай бұрын
Thanks
3 Ways to Make React App FASTER
14:43
Piyush Garg
Рет қаралды 45 М.
Speed Up Your React Apps With Code Splitting
16:50
Web Dev Simplified
Рет қаралды 389 М.
бабл ти гель для душа // Eva mash
01:00
EVA mash
Рет қаралды 7 МЛН
Family Love #funny #sigma
00:16
CRAZY GREAPA
Рет қаралды 37 МЛН
HELP!!!
00:46
Natan por Aí
Рет қаралды 46 МЛН
I tricked MrBeast into giving me his channel
00:58
Jesser
Рет қаралды 28 МЛН
Data Fetching using React Suspense and Error Boundary - React Data Fetching Patterns.
34:32
8 React Js performance optimization techniques YOU HAVE TO KNOW!
11:23
How to Improve Performance in React with Code Splitting
9:55
PedroTech
Рет қаралды 211 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒
1:12:35
Akshay Saini
Рет қаралды 367 М.
The Most Important Design Pattern in React
35:04
Cosden Solutions
Рет қаралды 96 М.
бабл ти гель для душа // Eva mash
01:00
EVA mash
Рет қаралды 7 МЛН