How to use memo in React to Optimize Renders

so we're gonna be taking a look at the memo function and react and how we can use it now this is a function that you want to use to optimize or reduce the number of renders your components have now we're gonna start by looking at an example of where this might come up and where you want to apply this and then how we can actually apply it to our components so to start off a common scenario that I find myself in or I may add it is with a form component so right here I have a input field and then I have a counter so the input field is changes based on this state that I have right here so use state I have text and we are updating the text with set text here and then we just have an input field that takes that value from the state and then we update it on change and then a child of this component is count and if we take a look at count it does two things the first is it keeps track of counts and it's blaze it and then when I click on this button it increments the count secondly it keeps track of the number of renders the component has gone through so the way I'm doing that is I set the reference or I'm creating a reference I'd fault it to zero and then I'm displaying the reference and I increment it every time this function is called all right so what this gets us to is every time I press increment you'll notice that count is increasing and that makes sense and renders increasing which makes sense every time I increment or call set state or in this case set count it obviously is going to re-render Morni to render but what you may not realize is because count is a child of this component whenever this parent component renders is also going to render the count again so what that means is as I'm typing in the form you'll notice our account component is actually rear end during a whole bunch of times so what you just notice there is on each keystroke it can render quite a bit so it we just rendered this component 63 tires so this is a place where we don't actually want to account to re-render because nothing is changing in it we only really want to re-render if we pass it a new prop or the state changes and so this is where we can introduce the memo function to help us out so what it looks like is we're going to say react dot memo around our function and it tends to look better if you get rid of the function and you say Const count is equal to this and you use an arrow function because then you can say react memo and you just wrap it across your component like that so now that we have wrapped the count component and react on memo what's gonna happen is it is only going to re-render when the props change or the state change so what that means is when I press increment of course it's going to re-render but if I come back to the index over here we're not passing in a new prop into the count so whenever I'm typing now you'll notice it's not actually gonna rerender the count so that is exactly where you would want to use something like this but keep note this is one of those things where you don't really need to optimize renders all the times and how the Box react is pretty fast and you don't run into a lot of performance problems but when you do this is one of the tools that you can use now this is a basic example we're gonna now dive deeper and do some more complex ways you can use this slash some problems you can run into with react memo so right here we're not actually passing any props into account but let's say we want to pass in a prop so for example what if I want like on odd and this is a function that I pass in and what I want to do is whenever an odd number is in the count then I want to say clear the text so I say set text and we're going to blank it out like that so I'm now passing in a function here and in my count I'm going to say I guess in my on click here we have set count and I'm going to check whether the count is odd and if it is we are going to call the on odd so we're gonna get our prop here and we can say if and we I guess we can render our or call this before we call set count I don't think it matters one way or another it could in some situations but not here I don't think so we're going to say if C divided by our mod 2 is equal to zero and should be countable that means the value is even and we're gonna increment it and it is now odd so I'm going to say on odd and we're gonna call it alright so now we're gonna say increment and I didn't really do I didn't really type anything here so we can't see when it happens so 4 and then we increment to 5 it clears it but what I want the show is we have now introduced a function here that we're passing in and now we're passing in two counts we've kind of broken our memorization right so nothing has changed here the prop is the same but its rear end during what's happening and the reason for that is what memo checks is the it does a shallow difference and what that means is that works great for Strings and numbers but it can cause some problems with objects and functions so basically what is happening is it's create a new function on every render right because we're just passing a lambda in here and because we're doing that it is seeing that the function is new and it thinks it's a new prop so this is a very easy thing to do if you're not aware so make sure when you using memo you're not doing something like this and the way we can fix it is by sticking this in something like use callback so we can say on odd is equal to use callback say Rach use callback and the dependency here is going to be set text and here we're going to say set text is going to be a empty string and then we can pass on odd here and so now our on odd function is only going to change whenever set text change so we can increment and now when I'm typing you'll notice it is now not rear enduring so perfect the other case that one to show is this with objects so if I just say Const data is equal to is even false and we just want to pass this data in so we're not even using this data in the count but let's say we are you're gonna notice we can increment the count that rear Enders it but now when I'm typing again it's causing a rerender every single time and the reason for that is because the reference to data is changing so how can we fix this with objects now this is obviously a hard-coded object but we can take a look at example with a not hard code object in a second one way is we can head over to our account and we can use the second parameter of memo so the second parameter of memo here is a function and it takes the previous props and the next props that the component is going to receive and you can compare the props and return true or false whether it should rerender so in this case i can say if the previous props is even is not equal to next props is even then we are gonna return true it should rerender otherwise we're gonna return false all right so let's give this a safe and some now if I come over here and I type I mess something up here it should be data is even so now when we type still having the problem okay yeah I had a backwards so if we say return false here that is going to cause it to re-render and if we return true here it will not render so we're saying if it has changed that these values are not equal then go ahead and rerender so if we increment good but now if I type here it is not rear end during so that is exactly the functionality that we want so that is one way you can actually manually come in and say how it should update or when should update that's one option the other one is we can make sure that this object does not get recreated every time so this is a hard code object so I could stick it up here and now we're not going to have that problem anymore so it doesn't cause any render to my type here the other one is we can use another hook so we can say Kant's data is equal to react used memo and this is going to return data which is is even false so what use and this should be curly braces or parentheses around here that way we actually return the object and that should be a comma there we go so what used memo does is it does not recreate this object unless the dependencies have changed in this case the dependencies never change because this is static so we will only create this once now it's good to note what happens if we want to have a dynamic object so let's say we have text two and we want it to change on text two but not text one so if we create another input so text two and we update text two and let's say we want data that we pass into here is going to be the value of text - and whether text to is even so we're going to say text 2 dot length mod 2 is equals zero so let's say that's the data that we want to pass in you'll notice I created text to essa' dependency so the data will change whenever text two changes so I'm going to create a placeholder so I know which one it is so now whenever I type in text - it should rerender but whenever I type in this one you'll notice it does not rerender button text - it does rerender and that's exactly what I want because the data is changing and I want count to re-render whenever text 2 changes so there you go that gives you an idea of how you can use memo and some of the things you may come across with functions and objects that you need to be careful with and how you can use you use memo and use callback to get rid of some of those problems and mitigate the objects and functions changing unnecessarily so the main thing you need to focus on is adding these dependencies to your use memo and use callback so they only change when they should be you

Channel: Ben Awad

Views: 63,107

Keywords: memo, React, react.memo, React to Optimize Renders, Optimize Renders, memo in React, memo react, react memo

Id: o-alRbk_zP0

Length: 11min 44sec (704 seconds)

Published: Thu May 23 2019