How To Increase Performance in React Apps

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be going over some really cool tips that you can use to actually increase the performance of your react.js applications before we get into the video if you could leave a like And subscribe I would massively appreciate it it would help push my videos to more people and it will just help me with my content so yeah that's basically it with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay so the first thing I want to talk about is the use of the hook use ref to increase performance so a lot of you guys might think this is a weird thing to include in this video because many of you guys actually misunderstand one of the main purposes of the use ref hook a lot of tutorials out there including tutorials I've made in the past stress the fact that they use ref Hook is used to be able to grab and edit elements from the Dom as if you are using for example a document get element by ID or query selector in normal JavaScript but the thing is that's not its only purpose for that reason I see a lot of people not actually using the used ref um a lot because when do you actually need to edit like like directly edit an element from the Dom uh it's for rare occasions such as for example focusing on an input or grabbing the value or something like that right and I see a lot of people just neglecting this hook and are using it as much as it should be used however one of the main use cases of the hook that I see people overlooking it a lot is the fact that the userf hook allows you to store a mutable value that persists across re-renders this is really useful because there's a lot of situations where you can actually decrease the amount of times the component re-renders by using the use ref hook in the screen right now I'm actually just showing you guys a very like simple but clear example of how this can exist you guys are seeing the code right now and this is an example of how for example you can grab with the value of an input and set it to be a state right so for example if you want to grab that value of a specific input and do something with that value such as in this case you're gonna you're just gonna click on the button and alert whatever you wrote on the on the input um it's normal for people including myself in a lot of my videos to just create a state and store the value of that input into that state right however uh since we only really in this case need the value from the input when the button is clicked it's not automatically we don't need it while we're typing on the input right we just need the final value of what the user typed on the input when you click on the button in this case it isn't necessary to actually use a state because it will re-render the component every time the value of that state changes right so we use this use effect in this example which console logs the word we render every time the component is re-rendering so you're seeing it right now that what's happening is every single letter I type will actually increase the re-render like we'll re-render the component once more which is again unnecessary what we can actually do to fix this is create actually instead of using a state we use a ref to keep track of the value of the input with the ref you can just create a for example a constant called the input ref set it as the reference to the input which you don't even have to put an on change method or anything like that and then when you click on the button you just grab the current value of that reference so with that we won't be at actually re-rendering the component every time there's a change to the input because we'll only grab the value of the input when it is done so this is a really cool use case we kind of decrease the amount of re-renders of this component from technically an infinite amount because you can just keep typing on the input for forever and it will keep re-rendering the component uh we decrease running an infinite amount to actually just one because it will only re-render once uh when you click on the button um and yeah that's that's pretty much it so does that mean that whenever you have an input you should always use the user ref instead of creating a state no absolutely not because there's use cases where you need a state also minor renders like this one uh are not that big uh depend it depends on the size of your project and depends on how many users are going to be using it however it's just a tip to increase performance because it will indeed decrease the amount of renders so keep that in mind whenever you're building your next project okay so the second thing I really want to talk about is um how to properly download dependencies so I see a lot of developers being very extreme with how they deal with dependencies so it can be either from one side where I see developers not downloading any dependencies trying to build their project from scratch not using component libraries not using CSS libraries just trying to do everything from scratch which in my opinion is dumb because the reason why we we got to where we are in the web development Community is because we use work from other people to be able to allow us to write code faster so we keep building upon what has been built before to progress with our career or progress with programming in general so whenever you don't want to use a library that is just going to make your life so much easier it's kind of like you're not actually taking advantage of all the tools that are provided to you so I don't think that's a good approach but on the other hand I see especially beginners when they find out that the amount of libraries and dependencies that exist out there is they just download it almost um like any dependency they see they download for any use case for example oh they need a carousel or they need a modal for their project well let me just Download Material UI with like a bunch of different stuff a super heavy library and just use for that specific use case and that's also not a good idea in my opinion you've probably done this where you need I don't know specific like a small thing from a library may it be a function maybe a hook maybe a component from Material UI for example and you just need that one thing so what you do is that you download the entire Library you add it to your dependency list you add that that's that thing into your bundle and um it it at the end of the day it works but uh now you just increase the bundle size of your application uh necessarily uh and Depend and that builds like that continues increasing increasing as you progress through a web app because you're going to run into new situations where you need to download new dependencies so this is what I would do to avoid uh unnecessarily doing this kind of stuff first of all I would install uh extension that I think is um it's almost like a statement like it's it's a standard extension in the market nowadays it's called import cost I have it in almost all of my videos a lot of people asked about it it's really famous uh it does nothing more than just telling you exactly the size of what you're importing whenever you import a package uh in vs code uh it's really cool because it really gives you a perspective um obviously you could just see the cost and uh the size of your packages before but I know how we are as developers we we don't think as much as we like to think we we think before doing stuff so um I think this packet or this this depends extension is really cool to have inside of vs code not only this but carefully choosing your dependencies and packages are always outweighing the benefit of the functions and methods and components you're getting from that specific package with the cost of its size and also other stuff for example the package can become outdated and then you have to replace everything right you have to rewrite the code because it's not going to be maintained that kind of stuff you really need to compare and contrast like see different packages not just get the most popular one and um really understand what you're putting because think about it this way you're injecting code into your project so you're kind of responsible for anything that happens from that code to the users that are using your project so keep in mind it's like basic ethics of programming so um it's important that you always keep that in mind and if you do that I can guarantee that your projects will start uh becoming faster because you're thinking about the size of it while you're developing it okay so the third thing I want to talk about it's really small but it's it's something that it's really cool because it affects a lot of developers and I think a lot of you guys might know this or already do this however I wanted to emphasize just because it is something that will affect a lot of you guys which is virtualizing your lists so in react and in any web development project out there it's very common to have some sort of list being displayed inside of your your app right especially in web apps where uh millions and millions of users out there are using it those lists can become really large and um it is necessary that you make your app be scalable depending on how big that list is an example of it it would be like displaying I don't know like all the posts on Instagram right they don't display everything at once that would be stupid like it would take years to load everything that has been posted and while it's loading there would be more stuff being added to the list as well so they progressively load everything right they they they show the posts and keep keep fetching more and more as you scroll through your app therefore this whole concept of virtualizing your list which is basically just rendering a list into chunks so that you don't have to render it all at once is really important and there's different libraries out there that can actually help you with this now if I'm talking about fetching data um and you're getting the data from an API or something like that you can just use uh different methods of like progressively fetching more data I've made a video on this on how to do this with graphql for example if you're doing this with um just a normal rest API you can constantly be fetching there's different methods out there that you can do this uh but there's also libraries specifically in react which you can do to render your lists in chunks an example and the most famous one and the one that I would recommend the most is react virtualized it's really famous I can leave a link for it in the description if you want to check it out uh read the documentation I can't even make a tutorial on it if you guys want but this is definitely something you guys should keep in mind while building your apps now the final thing I really want to talk about is actually probably one of the most important ones in my opinion which is knowing how to use and using the react profiler so react has what is known as the profiler API which basically measures uh how like how many times an app your app or your components are re-rendering and what is the cost of those re-renders and you can use that information to your advantage because I've seen that a lot of the issues with performance in react doesn't come from organizing and structuring your code prior to writing it in a way such that you think it is performant but rather um when you build your code you go and analyze what's happening in your app and then make the changes necessary area so my methodology for improving performance in a react app is not what you guys might think I don't just follow every single best practice not even some of the ones I'm talking in this video on every app I built you don't build a performance app by micro analyzing every piece of code you write because it would probably just take a very long time and um some changes are not going to be that necessary on the long run when you also compare the cost of the time you're building your app um to how many users are going to be affected by that and in which situation the users will be affected by that so like all the tips I gave you guys in this video are good and they will solve specific use cases when you're having performance issues but sometimes there will be net like those changes will be negligible if you don't have the issues that are being caused by those problems so what I mean by that is I build more performant websites in react by searching problems in my app and then fixing it not by starting out trying to prevent the problems from happening so if a component is re-rendering many times making the app become slow I will go go ahead find that problem and fix it rather than already knowing the problem was going to exist in like beforehand because sometimes you just don't right and one of the main ways I do this and I search for problems and I find them is by using for example the react Dev tools you can download it on your Chrome extension uh so it is a Chrome extension you can download it inside of your browser and it allows you to really really analyze how your components are are existing and also because you're using um the dev tools from your specific browser elixin Chrome you can actually change how your website is being displayed um maybe change it because when we are developers we usually create our websites in really good like CPUs really good internet connections so it's hard for us to really understand how a user in a place where they don't have a really good computer or a really good internet is gonna be like experiencing our website we really don't get that idea just because a list with two million entries are rendering in 10 seconds for us it doesn't mean that's going to happen with most of our our users so we always have to test out with different internet connections different um I don't know different computer systems and we can actually do that and simulate that by using uh your Chrome your own browser Dev tools I can make a whole video on explaining how to properly um analyze your your performance in your website with the react Dev tools I think that would actually be really cool to do let me know if you guys want to do see that in the description but I just wanted to mention to you guys that this is definitely the methodology I would approach whenever building apps I know for a fact this is the methodology that a lot of big companies use because they don't really want to be wasting time writing the perfect code because that's not what senior Engineers are doing they're more meant to find problems and fix it like I mentioned it so um that's basically it for using react Dev tools and this is also basically it for this video I really hope you guys enjoyed it if you enjoyed it please leave a like down below and comment which one to see next subscribe because I'm back this year I just said it in my last video I know and at the end of last year I was kind of slowing down a little bit but it's just because of a lot of stuff that was happening with me in my personal life now uh I'm changing it uh I'm coming back stronger than ever last year we hit 100k this year my hopes is to just become more connected with my community and grow as much as I can I'm hoping at least 200k that would be awesome but uh I can't thank you guys enough for everything you guys have done for me all the support and yeah I really hope you guys enjoyed it if you enjoyed it leave a like down below and comment what you want to see next and yeah that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] thank you [Music]

Channel: PedroTech

Views: 13,200

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react performance tips, react best practices, react best practices 2022, react hooks, react performance optimization, reactjs optimization, react optimization

Id: sTlUhEYEc-M

Length: 14min 19sec (859 seconds)

Published: Tue Jan 17 2023