Don't know how I missed this video all these days. Amazing explanation. Your reaction after seeing 100% performance results was hilarious. Thanks for the video.
I don't know How can I thank you for this particular video. The way you import the named function is amazing and as I searched you are the only one guy who had explained it. Thank you soooooo... much. I really appreciate your this video. Lots of Love from India.
Awesome tutorial! Unfortunatly, lazy and Suspense aren't compatible (yet) with server-side rendering. Another video like this but with server-side rendering optimization would be even more awesome ! Excellent explanation for this video tho and keep up the work.
Sad that this awesome tutorial is not much of a use to me at this instant. React.lazy and Suspense are not yet available for server-side rendering yet according to the React documentation. Love your way of teaching. This is the first video I have watched of you and am subscribing right now.
Thanks Mouni. And I hear you. It's sad that Lazy and Suspense are not fully supported in node. However, if all you need is pre-rendering (and not on-the-fly SSR) then puppeteer + headless chrome can be a fantastic alternative as your React app doesn't need to worry about APIs like Suspense or even useEffect.
This is great, I'd love to see the same use-case done using the loadable-components lib-it seems to provide better SSR capabilities than others. I'm currently having trouble replicating the framer-motion example, would be great to see how you'd approach it.
Thanks, Danny! You're right, some of these libraries like loadable-components, react-loadable and next/dynamic are much more comprehensive. The framer-motion example uses named imports. A quick search showed that named imports might not be implemented through loadable-components yet. See this discussion: github.com/gregberge/loadable-components/issues/245 I would try to create a very simple abstraction by using regular static imports. For example, you could create a "motion.js" file and inside it, you could do this: import { motion } from 'framer-motion'; export default motion; Then you could use that reference everywhere else in the app like so: await import('../abstracts/motion') This would be my first attempt. Using abstracts is usually a great practice as it keeps things more maintainable. Imagine if an app had an abstraction point for moment.js, but at some point decided to switch to date-fns. Replacing abstraction (given that it's done right) is far easier than refactoring a big part of an app.
Amazing content, I just think that "trick" to destructure the modules could become a Function to clean code.. imagine getting a lot of different modules? My solution would be making a functions that accepts 2 parameters, `importFrom` (string) and `moduleName`(string) but i'm stuck on it.. because it seems i can't use variables to call paths and modules: const getMemoizedPage = (importFrom: string, moduleName: string) => { return lazy(() => import(importFrom).then(mod => ({ default: mod[moduleName] }))) } There is lint errors and Typescript Errors, and I can't understand why it's happening, either how to solve it.
Hello, was a great and helpful video, so just about CSS files in react, I am using many CCS files, which are the steps or rules to perform CSS loadings in react? Kind regards
There are many ways to handle CSS nowadays. I have two approaches that I like to implement. 1. Well-designed apps have clear design guidelines that can be implemented at a global level. Think Tailwind. The major pro is that you don't have to worry about conflicts and imports, but the con is that you load a bit more CSS than your app uses on the first render. That's why I feel the app has to have clear guidelines so that unused CSS isn't too large 2. If lots of customizations are needed for components, then I prefer CSS modules. They work beautifully with code-splitting so you can properly run the app with minimal CSS. However, occasionally you may see rule overrides when modules are re-imported in succession and specificity gets "corrupted". This is rare and can be avoided, tho.
Thank you Fernando! The cool thing is that Webpack's magic comments will work out of the box, so long the app is built with Webpack. However, some webpack config may override - especially if you try to name chunks, but webpack optimizations are set to use a different strategy for chunk IDs.
Many thanks for the tips i understand the most part of this tutorial , i'm french , the second part it's difficult for me , may be because i'm just a junior dev . Can you give me your theme of VSC or your font ? Regards ;) susbscribed ;)
Youre gonna be big. The way you explain things just blows my mind. 👍
Thank you for watching! Stay tuned for more videos.
Don't know how I missed this video all these days. Amazing explanation. Your reaction after seeing 100% performance results was hilarious. Thanks for the video.
this is really good, many talk too much, make you turning around for nothing, but he gave the upshot straightforward.
I don't know How can I thank you for this particular video. The way you import the named function is amazing and as I searched you are the only one guy who had explained it. Thank you soooooo... much. I really appreciate your this video. Lots of Love from India.
Thank you for watching!
Thank you so much for such wonderful feedback! I'd buy you a beer for this, made my day 😃Glad this was helpful to you!
Amazing content, Modus! Thank you 💖
MAN WHAT YOU DID IS EXCELLENT
I'm glad you liked this, Kenneth! Thank you very much for supporting our work here 🙌
@@grgurgrisogono656 Keep up the great work 🙂. Looking forward for more awesome content.
Super helpful, this is gem of a content! Thanks for sharing!
Awesome tutorial! Unfortunatly, lazy and Suspense aren't compatible (yet) with server-side rendering. Another video like this but with server-side rendering optimization would be even more awesome ! Excellent explanation for this video tho and keep up the work.
This is EXACTLY what I needed. Thanks x2
Sad that this awesome tutorial is not much of a use to me at this instant. React.lazy and Suspense are not yet available for server-side rendering yet according to the React documentation. Love your way of teaching. This is the first video I have watched of you and am subscribing right now.
Thanks Mouni. And I hear you. It's sad that Lazy and Suspense are not fully supported in node. However, if all you need is pre-rendering (and not on-the-fly SSR) then puppeteer + headless chrome can be a fantastic alternative as your React app doesn't need to worry about APIs like Suspense or even useEffect.
@@grgurgrisogono656 Thanks, I will surely try this out the next time
That's really amazing man !!
Thanks Ange ♥️
🙏 take a bow. This is what I exactly looking for. Will be combining this with NextJS 😉
thanks for this advanced useful tutorial
Great tutorial, neatly explained... keep coming with react videos bro... subscribed .. thanks again
Thank you for watching!
Very good video. Subscribed. Thank you very much!
Many thanks, Kerim! It's great to have you in the community!
Thank you sir! You are the genius.
Thanks for this master.
Thanks for such videos. Please make a video on How to handle React Router (Dom) for a large scale react application?
Sounds like a good idea. Do you have any particular issues that I could pay closer attention to?
Thank you, it's really helpful
Amazing!
Awesome sauce
Great explanation, thanks a lot !
Thank you for supporting this effort, Florian ❤️
Thanks! Can u make performance optimization tutorial for next js ?
This is great, I'd love to see the same use-case done using the loadable-components lib-it seems to provide better SSR capabilities than others. I'm currently having trouble replicating the framer-motion example, would be great to see how you'd approach it.
Thanks, Danny! You're right, some of these libraries like loadable-components, react-loadable and next/dynamic are much more comprehensive.
The framer-motion example uses named imports. A quick search showed that named imports might not be implemented through loadable-components yet. See this discussion: github.com/gregberge/loadable-components/issues/245
I would try to create a very simple abstraction by using regular static imports. For example, you could create a "motion.js" file and inside it, you could do this:
import { motion } from 'framer-motion';
export default motion;
Then you could use that reference everywhere else in the app like so:
await import('../abstracts/motion')
This would be my first attempt. Using abstracts is usually a great practice as it keeps things more maintainable. Imagine if an app had an abstraction point for moment.js, but at some point decided to switch to date-fns. Replacing abstraction (given that it's done right) is far easier than refactoring a big part of an app.
THANKS THANKS THANKS
Goldmine, saving this offline.
What a well made video.
The disappointing silence after seeing the audit number is satisfying.
nicely explained
Sublime man
Thanks for watching!
Amazing content, I just think that "trick" to destructure the modules could become a Function to clean code.. imagine getting a lot of different modules?
My solution would be making a functions that accepts 2 parameters, `importFrom` (string) and `moduleName`(string) but i'm stuck on it.. because it seems i can't use variables to call paths and modules:
const getMemoizedPage = (importFrom: string, moduleName: string) => {
return lazy(() => import(importFrom).then(mod => ({
default: mod[moduleName]
})))
}
There is lint errors and Typescript Errors, and I can't understand why it's happening, either how to solve it.
amazing content
Hello, was a great and helpful video, so just about CSS files in react, I am using many CCS files, which are the steps or rules to perform CSS loadings in react?
Kind regards
There are many ways to handle CSS nowadays. I have two approaches that I like to implement.
1. Well-designed apps have clear design guidelines that can be implemented at a global level. Think Tailwind. The major pro is that you don't have to worry about conflicts and imports, but the con is that you load a bit more CSS than your app uses on the first render. That's why I feel the app has to have clear guidelines so that unused CSS isn't too large
2. If lots of customizations are needed for components, then I prefer CSS modules. They work beautifully with code-splitting so you can properly run the app with minimal CSS. However, occasionally you may see rule overrides when modules are re-imported in succession and specificity gets "corrupted". This is rare and can be avoided, tho.
thank you sososososooo much
Excellent content, question do you know if there's an additional config for make magic comments (Webpack) to work with react Lazy?
Thank you Fernando! The cool thing is that Webpack's magic comments will work out of the box, so long the app is built with Webpack. However, some webpack config may override - especially if you try to name chunks, but webpack optimizations are set to use a different strategy for chunk IDs.
Wow
logo from Olympics wakakakak
Many thanks for the tips i understand the most part of this tutorial , i'm french , the second part it's difficult for me , may be because i'm just a junior dev . Can you give me your theme of VSC or your font ? Regards ;) susbscribed ;)
what is audits please tell me in detail
always trust a dude with 2 beards
You got it man! I worked hard on the 2nd one. When I grow up....
9:50 is where he lazy loads
Good call! If you're lazy just hit that link!
npx create-react-app for me does take tooo long only about 24........ hours (psst, im not joking)