What is React memo?

hey everyone how's it going it's Lee Halladay here and I just wanted to make a quick video since it's been a little while because react version 16.6 just launched with this new feature called react memo so this video is going to be about 5 minutes long and it's just going to quickly cover what is this thing react up memo how can you use it how can it help you so I've set up a simple little react application I use create react app and if you come in here to look at the code you'll see that it is using the new react version 16.6 so that means we can try out react up memo so let's take a look at the component quickly it's just a little app component and it's got some state time which will initiate to whatever the current date is and then on component did mount every 1 second using set interval we will simply update the state the time property to be the new time and down here we will render it out as a string so just converting this date object into a string otherwise we'll get an error on the on the screen so if we go and look at the app in the browser we can just make this a little bigger here you can see that every 1 second as the set interval runs it is updating the state which is causing the component to re-render the new time great so let's say we want to add a new child component that shows how often the time is updating so we'll just create a new component here called child is and we'll import react from react and we'll create a function called child which will receive how many every how many seconds it's going to update as a as one of its prompts and then in here we will return a P tag which renders out I am updating every ah seconds okay so I just have to export this export default child and now I can go use this component inside of my app so keep in mind that this is not a class-based component it is a function-based component okay so we'll come back into app and we'll import child from child and that will allow us to use it here so remember it wants us to pass in a prop like this so they come back here it's not working right seconds right okay so even those is grammatically incorrect I'm updating everyone seconds it's showing up it's displaying the the prop that we passed in the number one here but this is causing somewhat of an unseen issue so let's go into our child and let's console dot log every time this child component renders so I am rendering will console dot log so you can see down here in the console this thing is rendering every second even though it really doesn't need to because the props that are it is receiving literally hard-coded as the number one so theoretically if this is a pure component or in this case a function if the input to it never changes meaning the props the output should never change it should always be the same if it's a pure component but that's great but what it's doing is it's trying to rerender every time which meaning which means it's do redoing the work every time that it doesn't need to do which could cause some inefficiencies in your code so this is what react memo is meant to solve it's basically saying if the props are the same don't rerender the component and we can use it pretty easily all we need to do is react react on mammal around our child functional component and what this will do it will essentially look at the props it's receiving and if the props are the same which in our case it is because it's always just the number one it will reuse the previous render rather than redoing it every single time so we come back here we refresh the page you can see that it is rendered once so it said I am rendering but it's it hasn't been doing it every one second like it was previously doing like our parent component here is rerender in itself every one second so basically if your functional component is pure meaning it's purely based on the incoming props that means you only want to render it once for for each set of unique props in that case you'll want to use reactor memo to get some performance improvements so that's it for the video today a nice short one but definitely make use of this and you can get some improvement some performance improvements out of your app alright take care have a good day cheers bye

Channel: Leigh Halliday

Views: 10,192

Keywords: react, memo, javascript

Id: J9u_k1dxyJk

Length: 5min 56sec (356 seconds)

Published: Wed Oct 24 2018