Code Splitting Made Simple

[@yoyo26-34]

Hi, very good thks. For those who are using typescript, for async load component (@9:44) you can type the useState like this : const [MyDefaultComponent, setMyDefaultComponent] = useState();. Then to import the component (no need the WrapperClassFunction) . Juste create the onLoad function inside your App like this : const onLoadComponent = async (): Promise => { const theComponent = (await import("./MyDefaultComponent")).default; setMyDefaultComponent(() => theComponent); }; This prevent react from crashing with the wierd error 'expecting string, received object'

[@Nomak111]

Amazing video, please continue covering topics like this. I feel like once channels get bigger they focus on content that is accessible to broader audiences and it's all just intro to this and that instead of advanced topics. Your's is one of the few channel's that produces quality content for people not on the beginner level. Bought your book to support, good stuff as well.

[@jherr]

Thank you sooooo much!

[@michaelharveymusic]

I second this, i love the deep dives you do!

[@theworld5937]

You are one of the best teachers of React. So much clearer than many others. Your font size is perfect and large enough and love the split screens. Don't think I can ever approach your level of mastery of React no matter how many years. Some people just think logically and some are more right brained. Thanks for your tutorials and I am a subscriber.

[@sanzhar.danybayev]

Jack, thank you for what you're doing! You're such an incredible teacher! I can clearly see that huge experience and wisdom that you posses ( btw I've been software engineer for 7 years) . What a luck to have you!

[@jherr]

Thanks! Lucky to have your feedback and viewership!

[@alex-vukov]

Thank you very much for the always great tutorials! I didn't know about the loadable components library and it looks really useful! One small remark - at 06:15 renaming the Webpack chunk to a fixed string called 'utilities' is not optimal for cachebusting because if the utilities file changes the user will have to clear the browser cache to get the new change.

[@RachidBoudjelida]

damn I have been doing react for little over 3 years now, but every video I learn something new

[@pratamaa.s.4356]

Thanks Jack! +1 subscriber as soon as I saw "advanced frontend" in your KZbin banner,. One small suggestion, if you could create a playlist named like "advanced frontend" or "junior to intermediate frontend", to cover these kind of topics that we must have to level up our frontend game.

[@marcelsdev]

Thanks Jack. This really helped me understand and clarify a few things that I was struggling with. Seeing it in practice with your explanations really helps filling in the gaps.

[@waqasrana5734]

you the gem i really thought that i can not do any thing. my collegues are doing exciting things and i don't know how to learn them then what luck to have you thank you love you .

[@jherr]

Awww thank you!!

[@igotbit9454]

Yes! loved this talk. not talked about much out there. thx!!!!!!!

[@mani8586]

Again TOP Content from Jack...like the way you explain the content so easily

[@gamingmobility8734]

I was trying to find a way to use Nextjs to have both a website, and a dashboard for the sites admins. I couldn't find a way to keep it separate anywhere. After going to the admin route forcing login and authentication then using this loadable component did the trick! Thank you!

[@kalyan4255]

Very Informative Video! Please keep doing more videos

[@TavoZapata]

Great stuff! Love the way you explain these core concepts

[@bythealphabet]

Great video Jack, loving the part of module Federations.

[@walidklai2417]

The best React channel, Period. Thank you Jack .

[@jasonthorpe3470]

If you want to store a React.FC in a useState, you don't need a fancy wrapper class -- just need to wrap it in an anonymous function, as in `const [myComponent, setMyComponent()] = useState( () => () => Loading); setMyComponent(() => () => My component has arrived) ` The reason this broke your first example in the "manually wrapping async loaded react components" section is that setState allows you to lazily set the state (i.e. in case the default value is expensive to calculate) so it lets you set the state (either initially or later with the provided setter) by giving it a function that will eventually return the state -- which it will only call once (e.g. so the initial state doesn't get calculated durning every render cycle). Plus `setState( () => MyComponent)` is much easier to remember than `setState(myFancyComponentWrapperForFunctionalComponenttMangedWithUseState(MyComponent))`

[@jherr]

Oh, yeah, you're right. Facepalm. Ah well. Still better to use loadable.

[@mkman]

That IS a gorgeous header! No wonder the product team wanted a piece of that action 😄

[@jherr]

Hahaha, absolutely!

[@rohan_webdev]

This is beyond any orther React video on KZbin. Full indepth I just love it ❤️💯🫡🫡. Thanks Jack 👍🙌😀

[@appuser]

Very interesting. I wonder how/if this has changed much since January. Thanks Jack, this helped me a lot!

[@guilhermegirardi]

Awesome video! Regards from Brasil!

[@shike769]

I have nothing to say than Amazing, blow my mind away 🤯

[@Mark_MKII]

I’ve been doing front-end dev for a quite a while, and finally have the opportunity to more forward-thinking work. Some of your explanations really clear up ambiguous concepts that are rarely expressed clearly. (A friendly note about the intellisense tooltips that seem a little overly aggressive in showing their lovely help text - they often obscure the code you’re trying to show, and in really bad cases instill a feeling of inexplicable anxiety)

[@jherr]

Yeah, I've started turning them off for screencasts. Sorry about that.

[@ranganathdevaramani2966]

Great content as usual. Please make a video on next js bundle analyzer and how to reduce the bundle size

[@electronicbasics1856]

i think that i will let my future self make the tests/comments/code splitting for me :)

[@angelprieto2001]

Thank you very much Sir, as always an amazing job!

[@RakeshKumar-bq3mf]

Awesome content. Appreciate great efforts.. Thanks Jack...🙂

[@shubhamlatiyan7972]

Thank you Jack, for the awesome information

[@ahmedChebilahmed19chebil]

nice content as usual ❤️. Thank you for the nice information

[@balzale]

Awesome vid, Jack!! Love your custom bash/zsh. Can you please share how to customize like that? THANKS!!

[@jherr]

iTerm2 with zsh/oh-my-zsh with oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

[@SIRISH1990]

Jack, thanks for all the stuff you do. can you also do a tutorial for securing electron app with keycloack.

[@BarryMichaelDoyle]

I've seriously learnt a lot from this! Is there a TS example of the `loadComponent` function that you've created?

[@jherr]

You'd have to declare the external module in your app.

[@BarryMichaelDoyle]

@@jherr figured that'd be the case, thanks man!

[@jherr]

@@BarryMichaelDoyle It's one of the disadvantages of runtime deps as opposed to build time deps.

[@umairasad3896]

I am really impressed by your theme. What theme are you using?

[@geneartista9714]

Awesome as always but I wanna know it`s best use case on a project

[@ashish_prajapati_tr]

an amazing and very important topic 👍👍

[@rishabhjain5135]

hi , nice tutorial. have a question - when to use this dynamic loading of components. Is there is any specific criteria for this or we can use whenever we want??

[@jherr]

I can't think of any technical criteria that says that you can't use it when you want.

[@rishabhjain5135]

@@jherr ok , so what's the difference between importing components normally vs importing asyncronously ?

[@大盗江南]

Hi Jack, thx so much for this great video. but i have a little suggest :) The title doesn't correspond to the content. and this is for advanced level. i thought this is a tuto for splitting complex code. plz correct me if im wrong. thx again for all those wonderful videos.

[@nakulnagariya7736]

Amazing, thanks Jack

[@SahilRajput03]

such an amazing video!!

[@danishansari5746]

There is an issue with React Lazy loading is that when ever we deploy the code the chunk file names are getting changed because of that the user gets the blank page. User will have to refresh the page or our may be have some code that will automatically refresh that page Hey Jack for React Lazy loading is there way to keep chunk names same and not to write extra code for auto reloading when ever the code is deployed and user is able to use latest code

[@haicoders737]

very nice video, btw , what kind of font and theme do you use in vscode

[@jherr]

Night Wolf [black] and Operator Mono.

[@MrEffg]

Thank you, Jack! Top content in calm manner as always! I wonder how could one leverage module federation in monorepo app or are there best practices on how to share code in monorepo app between packages (without bit . dev)

[@MediumSizeNoob]

Great one Sir! Can you share the theme and font you are using?

[@jherr]

Night Wolf [black] and Operator Mono

[@vengateshvaidyanathang550]

Good video.. Can you tell us the vscode plug-ins you are using as a pro dev

[@PickleRiiiiiiick]

Fantastic. I'm curious how this will work with Vite.

[@Ahmed-cy4jp]

What’s your VSCODE theme?

[@jherr]

Night Wolf [dark] and Operator Mono.

[@kalyanapasupathyvenkataraju]

Absolutely wonderful

[@oussamasadiki7377]

how about Vite?

[@rathileshc]

Really great tutorial , and could you please tell which theme are you using in VS CODE ? it looks like very nice ..

[@jherr]

Night Wolf [black] and Operator Mono for the font.

[@jr-hp7er]

You're awesome Jack 😘

[@kettenbach]

Awesome content as usual Jack. Can I ask how you got that amazing prompt in your terminal. I would love to use that! Thanks and have a great week.

[@jherr]

That's oh-my-posh + the powerlevel10k_rainbow theme + SpaceMono NF for the font.

[@kettenbach]

@@jherr so for Mac? You're using PowerShell?

[@jherr]

@@kettenbach On Mac I use zsh (oh-my-zsh) in iTerm2.

[@maximgasai1349]

@@kettenbach nah, oh-my-posh works with macOS and Linux shells as well

[@DarkShadow00972]

Hi jack u automatically getting lot of intellisense which extension r u using?

[@jherr]

GitHub Copilot.

[@DarkShadow00972]

@@jherr thanx 👍

[@aminedaimallah310]

nice tutorial, i just have a question, is this what it's called Serverless Components? i mean the last part of the video

[@jherr]

Not that I know of. Serverless Components is interesting stuff though. I hadn't heard of it before.

[@aminedaimallah310]

@@jherr oh my bad it called React Server Components, i made a mistake haha

[@jherr]

@@aminedaimallah310 No worries.

[@jherr]

@@aminedaimallah310 React Server Components is actually something different. It's an optimization around server side rendering.

[@aminedaimallah310]

@@jherr oh i see, thanks for explaining, btw i like the place where you film the tutorials, is it a forest?

[@fadi7819]

What is this font he is using in vs code ?

[@jherr]

Operator Mono

[@rjmunt]

I might need to rewatch but why rewired in one app and craco in the other?

[@jherr]

Because some folks use craco, other folks use react-app-rewired, and this video covers both. :)

[@rjmunt]

@@jherr Ahhh great thanks for covering all the bases sir. Great to see MF easily accessible in CRA at last.

[@christopheanfry]

Very Interesting video a lot of things to learn. I’m late with the comments but now that we see a lot of use of vite, is module federation still up to date and do you recommend it? I hear also about monorepo with nextjs is it working the same way? Thanks for your help and happy new year

[@jherr]

There is a module federation plugin for vite but it is pretty early days yet. The monorepo + nextjs is great, but it only accomplishes build time sharing and not runtime sharing. That being said, most of the time build time sharing is fine. But when you need runtime sharing, Module Federation is a great option.

[@christopheanfry]

@@jherr thank you so much for your reply really appreciate. Will check the plug-in for vite.

[@andersonluissilva8414]

You are amazing!

[@yathink2406]

Can we reduce node modules for each directorory into one

[@igor_cojocaru]

Cool! Thank you

[@Antoshkiv1]

Great video!

[@khanhnam99]

extension ? path show apple on visual studio code ?

[@devmohamedkh]

+١

[@jherr]

It's in the description, but it's oh-my-posh with the powerlevel10k theme, with SpaceMono NF as the font. I also use iTerm 2 and oh-my-zsh. And I use iTerm as the terminal within VS Code.

[@devmohamedkh]

@@jherr Can you tell me the name of the extension that completes the codes, please Like the one who completed the path shown in 10:30

[@jherr]

@@devmohamedkh Well, that particular import is Path Intellisense marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense But you probably want GitHub Copilot, which is doing a lot of the more TypeScript code-ey still hinting.

[@devmohamedkh]

@@jherr thank you so much ❤

[@maksymdudyk1718]

Thank you very much. Yet, it seems to me that your "setNames(makeUppeCase(module.default))... is not a common solution.

[@jherr]

Yeah, I don't think I would allow that particular variant. But the point here was just to show how to use default vs named exports.

[@kirillpavlovskii8342]

Great , thanks

[@abhisheksharma9796]

How much for the cabin in the woods?

[@jherr]

I think it's currently valued at $700K USD.

[@ashish_prajapati_tr]

@@jherr it's so costly

[@anasouardini]

do I need to do this when using Vite?

[@jherr]

Not really, because Vite serves every module independently. But Vite isn't used for production. So you will want to make sure whatever production system you are using supports it.

[@shinmessiah]

I watched this video over 3 times or so. The content is really good and particularly useful for a project at work using external data stores. Super clear and useful! Actually, already using craco for some webpack => electron stuff, should be easy to drop in Also, I had to research what was going on with your terminal, with those nifty tags and such lol

[@jherr]

If craco Module Federation works in Electron let me know. I'll probably give it a try, but not soon. So if you give it a go and get it going let me know.

[@jvzaniolo]

Can you make a video about Remix?

[@techhguy]

Hey Joao, Here's the link to Jack's take on Remix => kzbin.info/www/bejne/qJi9nJdjh6aMnKc

[@ytPEDROjoao]

🤯

[@waqasrana5734]

thanks

[@vulcs]

The problem are bundles, ESM solves this

[@shreyasshahu1423]

Respect++

[@ahmedrapira7610]

thnx

[@DuyTran-ss4lu]

great

[@jaybhatt6775]

God

[@hasi90s]

Who the hell will add button for users to click that button and load the stuff , sorry to say but the start of your video is ridiculous and misleading you should be straightforward in teaching something and anyone searching for code splitting is not a starter of react he/she is searching for code splitting because he/she has developed app now optimizing it mind it