The correct way to optimise React

I realized that a lot of you have misunderstood the concept of optimizing a react application I see a lot of you every single day using hooks like use memo and use callback wrong and also structuring your applications in a way that ironically is leading to worse performance so in this video what I want to do is show you some examples that I've seen show you why they're wrong and then show you the correct way to optimize react alright cool so let's begin here we have an example and we have one piece of state that holds a user the definition of the user is here at the top and you can see here that our user is very simple it has an ID property of type number and then a friends count property also of type number now let's assume that this is a project that we're working on for a client and we get a task to add some user statistics and display them in the UI these user statistics won't necessarily come from the back end but rather have to be computed on the front end and then displayed so to do that what we could do is we could come in here create a new object we're going to call this const user stats and this is going to come here it's going to take some properties the first one we're going to give it is popular which is obviously going to denote if the user is popular and for now we're going to put this as user.friendscount is greater than a thousand and then we're going to add a new property call it is new and this is going to denote if the user is a new user on the application and again let's assume that this is only the case if the user's ID is lesser than 10 and then we're going to need to add this to the UI so we might do something like user stats dot is popular and an end we're going to do popular user again this is really simple don't worry too much about this it is purely for tutorial purposes and then we might do something like user stats that is new we're going to let copilot do its thing and we're going to render our UI here now this is fine and this is perfect working code right there's nothing wrong with this the thing is I've seen a lot of you suggest that in situation like this we should wrap this user stats object into user memo that we should write this whole thing in use memo so that we can provide event unnecessary renders so if we were to do that we will come here replace this with use memo right give it something like this and then actually just paste this here and then let me just order this and actually we need to add a parenthesis here I believe yes save this and then right we need to give it our user as a dependency array and a lot of you have suggested that we should do this instead because this is going to be more performant now ironically the fact that we used use memo here is actually worse for performance than if we had not used it which may sound a little bit weird it may sound a little bit counter-intuitive but it's the truth and the reason is that you have to think about what user memo does right use memo is a hook that is used to freeze a certain value in this case or object here that has is popular and is new and only update that object that value when anything in this dependency array changes and to do that use memo behind the scenes will make some comparisons between the old value and the new value and everything in this dependency array and then do all of this computation all of this calculation to determine if it should we render all of this value now that computation isn't free and I feel that a lot of you don't realize this user memo has to do work to make sure that it only re-renders the values when it has to right it's not free it costs something so you want to use use memo only when you absolutely have to and use memo is a hook that is used to prevent unnecessary expensive computations which in this case there's nothing expensive about anything that we're doing we're just creating a simple object here and inside of this object we're just looking at this user accessing some properties and then determining some Boolean values based off those properties we're not looping over some large array we're not doing some expensive computations here we're not using any mathematics or cryptography we're not doing anything expensive so using use memo is actually detrimental because the work that use memo has to do to make sure that this value is properly kept updated it is more than the actual work to create this value in the first place so the correct way to optimize this component is actually to not do any optimizations and just remove this entire user memo completely and just leave the object as it is now and this is going to be extremely performant cool so that was one thing now let's build upon this example and show you another thing that I've also seen that is wrong when trying to optimize react in this case we're no longer displaying this user stats directly in the UI but instead we're passing it to this user stats component and as you can see here it is now responsible for rendering our user stats now here I've seen a lot of you suggest and actually strongly suggest that we wrap this user stats in use memo so that we prevent user stats from re-rendering unnecessarily but again use memo is not free the work that use memo does to properly know when it should update this value and when it shouldn't based off the dependency array is going to cost you and you always have to make sure that when you're using use memo you have a Justified use for it in this case if we were to apply use memo what would we actually achieve if you really look at this code here right this user stats component is a very lightweight component we actually have a name for components like this which is basically a Dom UI component it doesn't do anything else besides render some UI and it does no computation there's nothing expensive this is actually literally the same thing as we had before with the only difference that we just replace this like this right this is exactly the same we just extracted this into a separate component to make it a little bit easier for us to read and to understand and to work with the code we haven't added any other complexity any other logic or anything else expensive that would justify the use of use memo so in this case again the best way to optimize this scenario is to not do any optimization at all and just leave it as is and what that means is that yes this user stats object is going to get recreated on every single render right whenever this component this demo component changes which right now can only change based off of user this user stats is going to get recreated it's going to then trigger this user stats component to then re-render as well but we don't care about that because the render of user stats is extremely light and actually as I've said using use memo is going to be more computationally expensive than just rendering this user stats component you always have to ask yourself are you actually trying to prevent something expensive from running unnecessarily or are you just trying to optimize sometimes prematurely and sometimes even over optimized things that really shouldn't be optimized now let me show you the case we're using use memo is actually Justified so here I've added this expensive value in our user stats component and this is wrapped in use memo because we only want this to trigger whenever user starts changes let's assume that this does something expensive maybe it fetches some data maybe it does something some computation it is expensive and we don't want this to run unnecessarily this is now a different scenario this is a different use case and this warns you using his memo not only here when we're actually Computing this expensive value but also here where we're passing user stats because as we've said every time that this demo component renders user stats is going to be different which is then going to come here it's going to receive a new user stats in the user size component and then this use memo is going to have from its perspective a different you start and so this value is going to get computed unnecessarily so here the optimization is correct here you want to come here and you want to do use memo right and you want to pass the value here if I can just write it correctly and then add the dependency array there we go here it is Justified because again we want to control when user starts re-render us we don't want this to re-render on every single render so we're only going to make it render whenever a user is different then whatever is going to get passed here is only going to be different whenever user is different and so now we've made sure that this expensive value is only ever computed when it absolutely has to this is how you want to think about optimization in react you don't want to apply use memo and use callback unnecessarily and everywhere because as we've said doing that has a cost and oftentimes it is not needed and the cost of using it is worse than actually not using it and by the way this would work identical if we had used callback the only difference with use callback is of course that use callback returns a function but it functions exactly in the same way you don't want to use use callback unnecessarily you always want to use it only when it's absolutely necessary and also one last thing that I've seen that I really want to talk about because this is a video on up optimization in react let's say that scratch your entire examples as before let's say that we just needed to know if the user was is popular or not what would be the best way the most optimal way to approach this well I've seen people actually come here and do something like this const is popular set is popular that's going to be equal to use State and false and then they would make an entire use effect for this and I can just give it here give it user as a dependency array and then they would make the check if user.friendscount is over a thousand they would set is popular to true now this code of course works it's perfectly valid code there's nothing wrong with it functionally every time that the user is going to be different this code is going to run it's going to check if the user.frence count is greater than a thousand and if it is true it is going to set its popular to true and actually we might just optimize this a little bit we can just put this here just do this so that we also account for the case where the user no longer becomes popular and then we also have to set this back to false but this even though it works and it's functionally correct is actually unnecessary because you have a whole piece of State here that is not necessary and then you have a whole effect that you have to keep in sync you have to manage when actually nothing of this is necessary the easier solution is to just get rid of all of this and to derive the state instead so you could just do something like const is popular equals user dot friendscount is all over a thousand directly because doing it this way we not only removed the unnecessary State variable and the unnecessary use effect but we also removed one render cycle of our component because before if I can just go back before just so you can see it properly every time that user changes it's going to come here it's going to trigger this use effect to run which is going to set is popular and that is going to trigger a whole re-render of this entire component and if you have a lot of these use effects in your component that's going to be a recipe for disaster and horrible performance so be smart about this and always ask yourself can I derive the value instead and before any of you think about suggesting this using use memo here is not recommended because again we're not doing anything expensive here and using use memo is going to be more detrimental than actually not using it this is perfectly valid code and this is as optimized as you're going to get in reacts so there you go guys that was a little video on optimization in react hopefully this clears up some Concepts in your head I really hope that it did because I see a lot of people doing things wrong and actually hurting their performance and hopefully now you can go back look at your code change some things and see some better performance in your react applications if you enjoyed this video you can click here to subscribe it will really help me out a lot you can also click here to watch a different video of mine I'm sure it's super awesome with that being said my name has been there's cousin this is custom Solutions thank you so much for watching and I will see you all in the next video ciao

Channel: Cosden Solutions

Views: 30,871

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming, react, react native

Id: laf64Ms0yV4

Length: 11min 29sec (689 seconds)

Published: Wed Sep 20 2023