React Router Tutorial - 14

React Router Tutorial - 14 - Lazy Loading

Рет қаралды 112,226

2 жыл бұрын

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
⚡️ Checkout Taskade! www.taskade.com/
To upgrade any workspace, login and visit www.taskade.com/billing
Use coupon code: CodevolutionKZfaq for any workspace upgrade. Select "Add promo code" on checkout, enter the code, then hit "Apply". This will apply a 100% one year subscription discount. Enjoy and feel free to invite others to your workspace!
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Lazy Loading in React Router
React Router Tutorial
React Router Tutorial for Beginners

Пікірлер: 60

@ridimaudasi3045 2 жыл бұрын

This series is amazing man! Thanks a lot for the crisp explanation, and also for how we can use the dev tools to compare the before and after scenarios! SUBSCRIBED!!

@harunjasarevic8253 2 жыл бұрын

I am currently using Angular and learning React, its so easy to implement lazy load in React I am impressed

@mehtabahmed6092 2 жыл бұрын

Thank you so much for the nice explanation.

@rajeebnayak2836 2 ай бұрын

Thanks man. Your wordings and instructions were very clear :D

@jamesonajobi3135 Жыл бұрын

Thank you 😅been searching for tooo long

@teeyiheng4697 11 ай бұрын

Thank, I understand what is lazy after watch this video😁

@DreaMagnifier 2 жыл бұрын

for your very good knowledge just type lorem to get lorem dummy text in vscode

@igorbabiy3654 2 жыл бұрын

please make videos about performance issues, how to solve or maybe overview tools that can help to detect bottlenecks. Thanks for your job!

@mohammedrakib6538 Жыл бұрын

Thank you so much

@bindassingh9281 2 жыл бұрын

Superb !!

@adilrao7777 2 жыл бұрын

Amazing 👍

@nitecheng 11 ай бұрын

Good explain!

@aysommer Ай бұрын

Thanks

@alokranjan476 Жыл бұрын

Thanks a lot for explanation but in my current app, I can't find mainchuk in network tab. All other things are there as mentioned in video except mainchunk. Can you please suggest, where to find or there is any changes. Thanks.

@user-ee8vo2wb3e 9 ай бұрын

Amazing sir

@vivekjaiswal2422 2 жыл бұрын

You have made react routing v6 like a piece of cake. But I want to integrate react route 6 with withRouter.

@AdityaSingh-nk5xz 2 жыл бұрын

God Bless you Vro....💖

@sampathm207 19 күн бұрын

excellent

@fakedevdutt 2 жыл бұрын

great!!

@radezzientertainment501 Жыл бұрын

ty !!

@mrrishiraj88 2 жыл бұрын

Namaste 🙏

@ridl27 2 жыл бұрын

cool. ty

@Realife169 5 ай бұрын

Helpful

@colommbiano Жыл бұрын

Can the same be done in nextjs? could you make a video explaining the same thing but in NextJs?

@marcelhumes1360 2 жыл бұрын

Great.

@avishetty8 Жыл бұрын

@Vishwas, In this video you mentioned that we need a default export of the component... why? ... what is the difference between 'export const ' and 'export default componentName'?

@Deddy676 Жыл бұрын

export default App -> Import App from 'App' exporrt const App -> import {App} from 'App'

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

Try adding a semicolon after the lazy setup like the example below: const LazyAbout = React.lazy(() => import('./components/About')); idk why but it worked for me

@eduardohernandezsoto785 Жыл бұрын

I'm use tailwind css, it's not working when use lazy loading

@dhruv.pandey93 2 жыл бұрын

Hi. Nice video, a query though. If I put a console.log inside the About component(and there is no lazy loading implemented), I notice that the log is only printed when that component is rendered(when the /about URL is accessed). This means that the About component is not rendered on /home, it is only rendered on /about. Why do we need lazy loading if the code inside the component is executed only when the component is rendered?

@ShivamSingh-bx5lg Жыл бұрын

Even though the console log is not printed the package is imported in initial page load

@manishHack764 Жыл бұрын

'About' page although not executed but its content is still downloaded in initial page load.

@varungondu7053 2 жыл бұрын

I Got following Error - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. After doing export default also Any leads appreciated

@pankajxkumar Жыл бұрын

proptypes may be

@ABUTAHER-wg7gz Жыл бұрын

Can we get a useRoutes hook tutorial

@md.mohiulislam6516 Жыл бұрын

❤❤❤❤❤

@amrithababu4683 Жыл бұрын

How to lazy loading implement in MUi avatar

@rajnandanibhawsar3105 Жыл бұрын

@vishwas Mainchunk.js file is not showing under network table bundle.js file is showing

@mayurwankhade7447 Жыл бұрын

Same issue

@prakashc8711 Жыл бұрын

same issue. mainchuck.js not visible in network tab.

@gowthams4763 Жыл бұрын

@@mayurwankhade7447 same issue

@gowthams4763 Жыл бұрын

@@prakashc8711 sane issue

@miguelangelchamorrofuentes9248 2 жыл бұрын

How to wrapped with lazy loading many components?

@HamidAli-dc9iq 7 ай бұрын

but at the end time increased to 20ms 😂

@devbratsingh7762 2 жыл бұрын

@Vishwas sir please suggest best library for chart implementation in react.

@ridl27 2 жыл бұрын

recharts

@dipanshusabharwal 2 жыл бұрын

Can go with apex charts as well

@dabiridaniel5897 2 жыл бұрын

@@dipanshusabharwal For me the best

@VishalKumar-dv6qj 2 жыл бұрын

react-chartjs-2

@aramabdulrahman2087 2 жыл бұрын

next add protect route thanks...

@ehteshamali5471 2 жыл бұрын

added

@nOngyrOpLar 18 күн бұрын

What he said or Explained at the last 1 Minute 5:45 to 6:45

@saurabrakshit405 2 жыл бұрын

Not working Man !

@Ra5h3d_ 2 жыл бұрын

same edit: Finaly Worked, i named the component "lazyAbout", renaming it to "LazyAbout" worked for me

@varungondu7053 2 жыл бұрын

@@Ra5h3d_ i Got folllowing error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

@shineLouisShine Жыл бұрын

Tried it about 20 times. Definitely not working. Quite depressing actually..

@shineLouisShine Жыл бұрын

I did everything you've said, but while changing to Slow 3G indeed make the website loading really slow - It doesn't show the fallback message 😕 (tried on several browesers)

@shineLouisShine Жыл бұрын

Ok I understand what was the problem, and I'll just add what I wrote to the React developers as a feedback regarding this issue: " My problem was that no metter what I've tried - React.lazy didn't work and React.Suspense didn't behave as expected. The solution was to export the "About.js" directly to the "App.js" and not via the index.js middleware. I didn't find any solution in the documentation for that issue while it should be either notified in the docs or initially fixed in the framework/library itself. Good luck "