@@davidchavarriamendez9091 The correct method is up to your case and your boss's case. Can't really choose a "correct" methods when you can do it any way and it works. Now the correct way in my opinion is functionless/serverless architect. Anywhere where microservices can come in and pick up the slack. I absolutely hate when there's a module that either does everything or doesn't do anything at all. Also monoliths are a big no no.
Actually it's easy possible to use named exports instead of default exports. Import function is simply an promise. lazy(()=> import('component/login').then(comp => comp.login)) So no need to change the way you export functions.
Hey Thanks Man!!! Currently I am working on a project where performance is crucial. I am glad I came across this video and applied it on my project. Really helpful content, Have a great day.
Hope you stay healthy as always and keep making these micro-learning videos, it literally helps us to cultivate out mindset of "An Expert is a Beginner who stays actively curious and never quits". I like the way you do like, instead of making one long hours big project tutorial, you instead guide us to the basic concepts based on most demanded frontend trends like Performance Optimization and React Hook Form the simplified way. Bravo!!
Ohh, Pedro thanks for sharing this with us thank you so much I love that features, please we need a playlist from things like this, thank you again!!!!!
in your example you wrapped the entire Routes with the Suspense... what if like you said you want to only lazy load SOME of those routes... now with the entire Routes block is in the Suspense would that force everything to Lazy load?
The only routes that will lazy load are the ones that you import using the Lazy method. Although they are inside of the suspense, it will only lazy load if you import with the lazy function
many thanks for your sharing. I have applied react lazy in my project. Howerver, there are so many named export components in project (~ 40-50 files), so I can not go into each Component to change export to export default. Fortunately, I found a package lazily on npm, it works the same as React lazy but will convert named export to default export.
great video!, is there a way to start loading in the background a lazy component after our normal component renders but before we actually requires the lazy ones?.
i opened a tab in my browser one year ago....on this topic....obviously i lose it among all the hundreds opened tabs 😂. i finally completed my react education...10x
These are just vscode settings 1) you can configure it to auto-format the code after you save 2) his indents are configured to be 2 spaces instead of 1 tab
Hey man, I watched this video earlier and loved the concept of lazy loading. I am currently implementing it into my current project and am here to ask if lazy loading caches loaded components. Thanks, man.
Question, because I can't check it right now. By wrapping Suspense around ALL the links and ALL the lazy loaded components you are forcing ALL of them to be loaded until the menu of links is shown, am I wrong?
No, the menu of links is not lazily loaded and not inside of the Suspense wrapper. It might load first but its independent from the lazily loaded components. Im not sure if I understood the question correctly though so let me know hahaha
@@PedroTechnologies ok, I might have not made it clear (it's midnight here in Spain). Suspense wraps it's children and doesn't show anything other than the Loading component until ALL the children have been loaded, right?
Noo, the suspense will show the fallback if it is triggered. In the case of lazy loading, it will show the fallback whenever one of the components inside of it are loading for the first time. In the video you see that as i switch routes it will show the fallback as long as its the first time i am going to that route
I'd be great a React crud implementation with Redux and hooks, it's without classes, using containers, slices as well for explain as other ways or cases to use, idk, a tutorial of it without pain ❤
@@PedroTechnologies só vim perceber que era br quando vi os comentários, ótima dicção e ótimo conteúdo, me lembrou bastante a forma como o conteúdo é gerenciado (talvez por debaixo dos panos não tenha nada a ver) pelas páginas agora no Nextjs 13.
Probably a really stupid question but could you use this same idea to dynamically import a CSS theme to allow a user to select they’re own personalized theme.
How do you deal with paths that you request form the server and you display the path component in a react bundle? NOT ON A DEV SERVER!! YOU BUILD THE PROJECT AND SERVE IT USING EXPRESS OR WHATEVER. How do you manage that?
What are those curly braces, that appeared after you moved Suspense over Routes? BTW: You make very nice Quality-Content. Any ideas what you will do on 100k subs?
Keep building projects and never stop, build more advanced projects after, the hooks will always be needed for every bigger project so you shouldn't forget them, also read up on documentation as well.
A quick question. So can one implement code splitting together with the context hook for state management and also use react query at the same time or is that too for performance optimization?
I think you are mixing some concepts up. You can have a shared state manager like Context while keeping react-query handling your API calls. You just need to be careful not to mix your shared component state with the react-query state.
@@rafaelarantes4804 Thank you for replying. "You just need to be careful not to mix your shared component state with the react-query state." Now this is where I think is messing me upl. Lets say a user logs into a system, where there's route/end point that checks if the "auth" is valid and a route/end point that they use to log in. In such a case, where should the use of both context and react-query come? Hope am making sense or maybe I am overthinking the concepts.
@@softwaredeveloper2897 You can implement in a number of ways. I'm going to guess your are using a CSR aproach. You can trigger both of your calls using a mutation when you login. Either, changing some local state that is a dependency of your useQuery or refetching it using the imperative property refetch that you can destructure from useQuery. Idealy, this component should be a wrapper over , that you can use as a component.
@@rafaelarantes4804 Wow!! thanks a ton💪. It's like you were reading through my code. I really appreciate you taking your time to help. It means a lot. How can I reach out incase of anything? Regards
Yo Pedro love your content always, huge inspiration. Quick question, is it normal that am having more fun and actually building stuff in react js and not vanilla js? As soon as i learned the basic in vanilla js, i moved on to react and no am a bit worried that i didnt spend enough time in learning everthing in JS and building projects. Hope it makes what i just wrote😂. Greetings from Switzerland
You don't have to export default for dynamic import() to work. You can instead do import('./CreatePort').then(module => module.CreatePost)
you actually have to return object with default
import('./CreatePort').then(module => ({default: module.CreatePost})) - like this
@@IdandushHen you don't have to import/export anything, just have 1 file with 1 line of code and boom!
@@KevinArellano So what's the correct method?
@@davidchavarriamendez9091 The correct method is up to your case and your boss's case. Can't really choose a "correct" methods when you can do it any way and it works. Now the correct way in my opinion is functionless/serverless architect. Anywhere where microservices can come in and pick up the slack. I absolutely hate when there's a module that either does everything or doesn't do anything at all. Also monoliths are a big no no.
@@jameswatadza8962 I don't even know why these people see videos that seem to be so below their level. They just come here to show themselves
Actually it's easy possible to use named exports instead of default exports.
Import function is simply an promise.
lazy(()=> import('component/login').then(comp => comp.login))
So no need to change the way you export functions.
how i leaned so much in a 10 minutes video is out of this world. Thanks Pedro, you're awesome
Hey Thanks Man!!! Currently I am working on a project where performance is crucial. I am glad I came across this video and applied it on my project. Really helpful content, Have a great day.
What is the result like?! I'm so curious, how much performance increase do you see?
I'm really new to optimising and making it more faster.
I didn't know about this concept, thanks for this! also your editing has gotten super clean!
Happy u liked it! Im re-investing into quality :)
Hope you stay healthy as always and keep making these micro-learning videos, it literally helps us to cultivate out mindset of "An Expert is a Beginner who stays actively curious and never quits".
I like the way you do like, instead of making one long hours big project tutorial, you instead guide us to the basic concepts based on most demanded frontend trends like Performance Optimization and React Hook Form the simplified way. Bravo!!
Absolutely love these small 10 minute videos. To the point, and learned a whole lot. Thanks
Yo Pedro amazing video as usual. Good to see your still helping us learn to code while your a software engineer at Twitch!
This is definitely increase your website performance.
I used next/dynamic to import components.
Great performance optimizations, hope you do this kind of videos more.
Great vid! I recognized the Brazilian accent as the it started playing 😆
Keep up the good work!
você é incrível! Merece todo o sucesso do mundo!
I have a mediun sized frontend project and this really helps. Thank you
I think I've learned from you in a couple of hours more than all these pointless Udemy 40+ hour courses
Ohh, Pedro thanks for sharing this with us thank you so much I love that features, please we need a playlist from things like this, thank you again!!!!!
Gracias Pedro! nuevo skill desbloqueado!
this is just point to point explanation. Loved it
Great information, thank you for posting this video.
Dude your content is amazing, the way that u explain things is really interesting.
Simply & straightforward! Love the explanation!
Simple and straightforward explanation! excellent work👏
New react course was damn good 😊😊
Love this video man :-) well done with the simple explanation
Very well explained in a practical manner
I have always wondered how to implement this🤩. Always learning new things from you.
Thank you so much for this video☺You explained it so well
Pedro, seu ingles esta bem fluente! E o seu conteudo e bem apresentado! Parabens!
What is the end value of performance you won? Have you calculated it? Or it's just fine thoughts that you read somewhere?
Muito daora mano, manda muito na programação e no ingles tb!!1 brabo
in your example you wrapped the entire Routes with the Suspense... what if like you said you want to only lazy load SOME of those routes... now with the entire Routes block is in the Suspense would that force everything to Lazy load?
The only routes that will lazy load are the ones that you import using the Lazy method. Although they are inside of the suspense, it will only lazy load if you import with the lazy function
@@PedroTechnologies !!! Nice makes sense thanks for the reply!
@Ajkl Ajkl watch his video from the start and try to understand the the explanation of the purpose of lazy loading. He explained the purpose properly.
6:35 Actually React Suspense has been used with the same regularity throughout all versions of it's for as long as the hook exists, but it's ok :)
Good information on optimisation of a react app.
As always brother didn't let us down!
That was amazing, thanks a bunch!!
nice man, finally i got it. Thanks.
Nice video, would have been good if you had the code linked in the description also though
Great content bro, thank you !
Great Video bro... helps a lot.
Jeez the quality ✔✔, What mic do you use?
Thank you
many thanks for your sharing. I have applied react lazy in my project. Howerver, there are so many named export components in project (~ 40-50 files), so I can not go into each Component to change export to export default. Fortunately, I found a package lazily on npm, it works the same as React lazy but will convert named export to default export.
Watching Pedro's videos never disappoints. Keep it up 👍🏼👍🏼
Excellent Video. Pedro, where are you from?
It's very useful, thank you so much
Parabéns mano, muito bom o vídeo 👏
great video!, is there a way to start loading in the background a lazy component after our normal component renders but before we actually requires the lazy ones?.
Thank you from the bottom of my heart!
Hi Pedro..thanks for the invaluable resource. Please can you do a video on design patterns with examples. Thanks
i opened a tab in my browser one year ago....on this topic....obviously i lose it among all the hundreds opened tabs 😂. i finally completed my react education...10x
Please make a playlist -> how to improve
what theme are you using Pedro nice color combination
Please 2 questions.
1) at 6:45 your code just automatically tabbed itself. How?
2) your tab indents are smaller than mine. How?
These are just vscode settings
1) you can configure it to auto-format the code after you save
2) his indents are configured to be 2 spaces instead of 1 tab
Hey man, I watched this video earlier and loved the concept of lazy loading.
I am currently implementing it into my current project and am here to ask if lazy loading caches loaded components.
Thanks, man.
This is super helpful!
thanks for the vid. I was wondering what theme do you use?
Thanks
Question, because I can't check it right now. By wrapping Suspense around ALL the links and ALL the lazy loaded components you are forcing ALL of them to be loaded until the menu of links is shown, am I wrong?
No, the menu of links is not lazily loaded and not inside of the Suspense wrapper. It might load first but its independent from the lazily loaded components. Im not sure if I understood the question correctly though so let me know hahaha
@@PedroTechnologies ok, I might have not made it clear (it's midnight here in Spain). Suspense wraps it's children and doesn't show anything other than the Loading component until ALL the children have been loaded, right?
Noo, the suspense will show the fallback if it is triggered. In the case of lazy loading, it will show the fallback whenever one of the components inside of it are loading for the first time. In the video you see that as i switch routes it will show the fallback as long as its the first time i am going to that route
I'd be great a React crud implementation with Redux and hooks, it's without classes, using containers, slices as well for explain as other ways or cases to use, idk, a tutorial of it without pain ❤
Amazing explanation thanks man
Great vid bro. Thanks
This video explains really well why you should choose angular over react.. 😂😂😂
Ótimo video! Poderia fazer um vídeo falando sobre o novo use hook e como isso impactará no React query?
Vou fazer!
@@PedroTechnologies só vim perceber que era br quando vi os comentários, ótima dicção e ótimo conteúdo, me lembrou bastante a forma como o conteúdo é gerenciado (talvez por debaixo dos panos não tenha nada a ver) pelas páginas agora no Nextjs 13.
Top notch as usual
Great content 👌
Glad you liked it
Thanks Man ❤❤❤❤
This is amazing 🥰
Very usefull man... thanks for share!
Please make more videos on how to improve the performance of react application
Which theme you are using in this video
Hi Pedro, thank you for sharing tips. I just want to clarify if this can be achieved as well with ? Which is rendering exact route
awesome video !!
Obrigado!!
Same problem on my project but I used redux thunk and api calling whenever other pages openings.. so api taking some time for the response.
Probably a really stupid question but could you use this same idea to dynamically import a CSS theme to allow a user to select they’re own personalized theme.
Pedro, do you have a tutorial on how to auth with Google and then register with an express API app? Thanks.
Thank you so much pedro
Why do i blink when i route between pages after adding lazy load?
Peidro tech sensei. Saludos desde Perú.
Thanks! Great Job!
Is suspense a ready to use and stable functionnality with react ? Because it has been introduced an experimental one for years now
Can you also make a video on , how to improve performance in Nextjs..please
Brabo! Adoro esse canal
How do you deal with paths that you request form the server and you display the path component in a react bundle? NOT ON A DEV SERVER!! YOU BUILD THE PROJECT AND SERVE IT USING EXPRESS OR WHATEVER. How do you manage that?
I have problem with tailwind css, it's not show css implemented when use lazy
Great content, congrats
can you lazy load components from an index file?
whats your theme font for vscode?
What are those curly braces, that appeared after you moved Suspense over Routes?
BTW: You make very nice Quality-Content. Any ideas what you will do on 100k subs?
Just don't forget to add error handling in case on poor network lazy loading fails.
Does this affect the app when deploying it?
How can I practice hooks ? I study I understand and after some months I forget. Help me
Build your own projects, implementing big functionalities
Keep building projects and never stop, build more advanced projects after, the hooks will always be needed for every bigger project so you shouldn't forget them, also read up on documentation as well.
Studying is 10% of learning. Applying is 90%.
I second what they said! Just keep trying to built bigger and more advanced projects and find ways to optimize ur code
I saw React router documentation v6.4 there is not available old style of doing
Can we import npm package with react lazy loading?
Ótimo conteúdo, obrigado!
A quick question. So can one implement code splitting together with the context hook for state management and also use react query at the same time or is that too for performance optimization?
I think you are mixing some concepts up. You can have a shared state manager like Context while keeping react-query handling your API calls. You just need to be careful not to mix your shared component state with the react-query state.
@@rafaelarantes4804 Thank you for replying. "You just need to be careful not to mix your shared component state with the react-query state." Now this is where I think is messing me upl. Lets say a user logs into a system, where there's route/end point that checks if the "auth" is valid and a route/end point that they use to log in. In such a case, where should the use of both context and react-query come?
Hope am making sense or maybe I am overthinking the concepts.
@@softwaredeveloper2897 You can implement in a number of ways. I'm going to guess your are using a CSR aproach. You can trigger both of your calls using a mutation when you login. Either, changing some local state that is a dependency of your useQuery or refetching it using the imperative property refetch that you can destructure from useQuery. Idealy, this component should be a wrapper over , that you can use as a component.
@@rafaelarantes4804 Wow!! thanks a ton💪. It's like you were reading through my code. I really appreciate you taking your time to help. It means a lot. How can I reach out incase of anything?
Regards
will this work on next js?
Is suspense really recommended in a actual large scale application ? It's still experimental...
Nice explanation
You can also code split packages using react loadable.
Yo Pedro love your content always, huge inspiration.
Quick question, is it normal that am having more fun and actually building stuff in react js and not vanilla js? As soon as i learned the basic in vanilla js, i moved on to react and no am a bit worried that i didnt spend enough time in learning everthing in JS and building projects. Hope it makes what i just wrote😂. Greetings from Switzerland
so it does not work with named exports ?
Mano seu Inglês está brabo congratz.
not applicable to next js right?