10 Tips For FASTER React App
HTML-код
- Опубликовано: 7 июн 2024
- 10 Tips to make ReactJS application faster
This video will show ten tips and techniques that you can use to speed up the performance of your react applications. We will look at react lazy, react suspense, memorizing store, using local state, react fragments, and others.
Next recommended video: React Tic Tac Toe - • ReactJS Tic Tac Toe (F...
Timestamps:
0:00 Introduction
0:08 Tip#1: Virtualizing or Windowing
1:15 Tip#2: React Lazy and React Suspense
1:57 Tip#3: Dependency Optimization
3:00 Tip#4: Memoize Store
3:56 Tip#5: Avoid Unnecessary Renders
4:45 Tip#6: Use Production Build
5:17 Tip#7: Keep state local instead of store
5:53 Tip#8: Use CDN
6:30 Tip#9: React Fragments
6:53 Tip#10 Web Workers
7:37 Final Thoughts
![COMMON REACT Interview Questions [ 2022 ]](http://i.ytimg.com/vi/v6Myf4WoL00/mqdefault.jpg)
![COMMON REACT Interview Questions [ 2022 ]](/img/tr.png)
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
Next recommended video: React Tic Tac Toe - ruclips.net/video/w8V--ZBzh7w/видео.html
Man, this has to be one of the best video for React app optimisation techniques. This covers almost everything.
thank you! spent so much time in one video :) this kind of comments makes me keep on going and appreciate the efforts i put it.
Finally, someone who is diving deep into react and front end stuff ! This is great, please we need more stuff like this. you earned a subscriber.
thanks for subscribing! definitely more front end vids soon.
This video helped me to solve one critical problem. 🙂
Thanks man, keep adding videos like this
glad that this video helped you out. Will add more videos like this. Thanks.
Do you like this kind of video making it very interactive like this? Please let me know. Thanks.
This has to be one of the best coding videos with the best editing.
WOW! This is the best comment I have received in a while and I appreciate it a lot. Definitely spent many days on this particular video and I am glad that dev/eng found it useful.
Thank you so much! Very useful
Glad it was helpful! Thank you for dropping a comment.
That's a great information brother ❤
Glad you liked it! Thank you.
Subscribed 👏
thank you! means a lot to this channel 🎊🎉
just had an interview and I wish I found this video. keep up the great content
of course! how did your interview went?
Great!!!!!!!!!!!!!!!! 🙌😁
thank you!
Most underrated videos of React
i appreciate it Mustaque! 👊👍
This is great
thank you much! i devote so much time in this one video 🤙🏻
Thank you very much
I am glad that you liked the video and you can expect to see more videos like this.
Thanks for the video.
Just curious: if we set a React Fragment instead of a UL for LI elements, what will generate in the DOM? If it's not a UL automatically, then that defeats the purpose of using the correct semantic markup.
Fragments are usually best when they replace generic tags like Divs.
All of your other points are great. It's pretty standard stuff, but it wouldn't hurt for Devs to review this every now and again.
Fragments let you group a list of children without adding extra nodes to the DOM.
for you question `Just curious: if we set a React Fragment instead of a UL for LI elements, what will generate in the DOM? If it's not a UL automatically, then that defeats the purpose of using the correct semantic markup.` the result will be a bunch of LI only.
your second point - `Fragments are usually best when they replace generic tags like Divs. `. It doesn't replace Divs. You can think on fragment as invisible container and when the component renders, it removes the fragments.
great video!
Anyone know what tool was used to produce the dependency usage visualization at ~2:43?
the one I used is called - Webpack Bundle Analyzer
but there are other alternatives too as you can see here - blog.bitsrc.io/6-tools-and-techniques-to-analyze-webpack-bundle-size-817337f8cf91
Nice
Thanks very much for the comment and I am glad that you liked the video👌👊
hi i have a doubt does 'lodash-webpack-plugin' will remove all the unused functions from every library used in react app or just remove unused functions from lodash only?
lodash-webpack-plugin is for lodash only to create smaller Lodash builds by replacing feature sets of modules with noop, identity, or simpler alternatives.
This video is very nice. Your channel is great for interview preparation, so please do post many videos to get success for interviews.Hope this of what expecting all our subscribers. I want this channel for one stop frontend interview preparation. What is your thoughts on this
thank you! interview prep is my main goal as well when I see the potential and based on the metrics ive collected from likes, views etc. i think i would continue to post more of those.
at the same time, i was thinking on the side that i don't want to limit my channel into all interviews but entire front end topics so we are going to be more generalized and can cover more FE topics.
i am glad that you mentioned this one-stop shop too as i think majority of my subscribers are asking and expecting as well. Passing interviews are not an easy task so I will continue to help.
@@ASoftwareEngineer Thanks for the reply. Please do post videos consistancely so that you will be get more viewers like us . i knew you do have personal work but pls set any week day to post videos regularly to reach channel to everyone.
noted. after this react video i am working now i will start going to create videos again on interview prep and will do my best to post weekly even it is short ones.
thanks for the feedback, meant a lot to me