That React Component Right Under Your Context Provider Should Probably Use React.memo

hey how's it going it's Lee Halladay and in this video we're going to be looking at this tweet from Sophie Albert she was the former manager of the react GS team and she said that react component right under your context provider should probably use react memo so I wanted to take a look into what does this mean and basically what's the problem and how to solve it I apologize in advance I'm a little sick so my my throat's a little bit raspier than normal alright let's get going it's a pretty short video so I've got a crate react app that's just spitting out the word context right now and we are going to create context so we'll do this here will called my context and it will be react dot create context and we'll just start it off like this so context is a way to basically provide State by skipping levels in your react nested components so instead of having to pass state prop to prop to prop to prop you can sort of jump a bunch of levels and use the state deeply nested wherever you need it and we'll start this off by in here we will create some data so why don't we work with theme set theme and that will be react dot use state and we'll start it off as a light theme we'll have a variable called next theme which is basically if it's currently light it'll be dark otherwise it will be light again like that so the way theme works is you need to provide it you need to create a provider and everything else the rest of your app will be nested within this provider that allows it to sort of reach up and grab things from the context so instead of these divs here we will use the context and use the context provider to have everything else nested within it so we'll just have the word nested here we're gonna put components inside of here and what you need to do is you need to provide a value to the provider so we'll just create a variable called value and it will have the theme the next theme and we'll call will create a function called toggle theme and basically what this will do is it will update the theme to be the next theme so when you call this function it will call set theme and it will change the value to be the next theme like that so we need to pass value as a prop and now I'm going to create two sort of nested child components so the first one will be a function called direct child so functional component and what it will do is return a nav that has another component inside called deeper child like that so deeper child doesn't exist yet so let's just come down and create it um I actually should put it above because otherwise the reference cuz it Const needs to come before this one so keeper child like this you okay so this will return a paragraph that has a button inside of it and on click it will do something so what I want to do is I want to let me actually see maybe it won't give me an error let's try that so what I want to do is console dot log every time these are rendered so that we can see how often they're being rendered and what causes them to be rendered so this will be direct child so direct child we're going to render right inside of our context provider so just to go over this we've got our context provider that is rendering inside as a child the direct child direct child is then rendered rendering deeper child and deeper child is where we are going to sort of reach up to our context and grab the value from it so we're going to grab the next theme and the toggle theme function and this comes from our context so the way you grab context and react is you see react use context and you pass in this used context variable that we created way up here my context and now we can use these values and notice we we sort of skipped a level we never pass them from this level to the direct child direct child to the deeper child in the deeper child so this is like two or three levels deep we basically reached up and we grabbed a value from the context so we'll put this next theme here and on click we will have it call toggle theme like this so let's go take a look at the app right now so as I click this it going from light to dark late the target its toggling back and forth but what you can see is every time I change the value in my context it's rendering both the direct child and the deeper child so a direct child deeper direct out deeper and the truth is that we don't really want direct child rendering because in react typically a component should render when either the props that are being sent to a change or state that it owns changes but as you can see here it's not receiving any props and it has no state so there's no reason to re-render this direct child the only one we actually want to rerender is the deeper child so this is happening because we are directly nesting child inside of this provider and every time a value changes here it's causing this direct child to be reread nerd when it doesn't so this is where Sophie says the react component right under your context should probably use react memo so what this means is that we can wrap react memo around this and react MMO receives a functional component and what it will do is it will only allow this component to be rendered if the props change or stay directly within it can also trigger a rerender but it will aim to stop this rerender in when it's really not needed so if I were to now toggle back and forth you can see the direct child got rendered the first time that's to be expected but then the deeper child is the only one to be rendered from now on so we've caused a lot of rear entering from happening you could probably ignore this unless it becomes a performance issue there's also another way to solve this so let's remove reactor memo go back another thing you can do is you can create a component called my provider like this and basically move all of this logic up into your my provider so this is well I'll just copy this whole thing up actually okay so we need to make a couple changes here we want to return my provider instead my provider and inside of my provider were giving it a child so we need to tell it it's going to receive children and instead of rendering the direct child we will render whatever Children happens to be so just to go over what this change was we removed all we removed all of the context provider into its own functional component and it's being used rather than sort of all of this code directly inside of our app and we're still rendering direct child inside of it but now it's sort of being rendered via being passed as a child here so doing that we see direct child and deeper child rendered but it's again not causing the direct child to be re rendered and that's because the react code that controls only re-rendering when the props or state change is now working correctly by having it rendered as children so that's what Sophie's talking about basically there's two ways to solve the re-rendering issue when you're using your own context provider the first way is to wrap the direct child in a reactive mo call the second way to do it is basically to to pull this out into your own functional component and render a direct child by it's by using the children prop instead of having it directly embedded inside of your app that's it for this video hope you enjoyed it take care bye

Channel: Leigh Halliday

Views: 13,952

Keywords: react performance, react context, react memo, context provider, react context provider, react hooks, react, react useContext, react re-rendering, prop-drilling, react props, react state, react context tutorial, react memo tutorial

Id: CDGBTjMBJzg

Length: 9min 47sec (587 seconds)

Published: Tue Feb 18 2020

Reddit Comments

[u/timothyallan]

Pheeeew, thank you for clarifying that. I've been using a shared provider forever and couldn't figure out WTF all this useMemo jibber jabber was all about lately. Good to know that I'd inadvertently solved the 'issue' from the start!

[u/swyx]

follow up to https://www.reddit.com/r/reactjs/comments/f53ff7/that_react_component_right_under_your_context/

[u/Silenux]

Following Brad Traversy's courses I've always declared the Context in another component and passed the children inside the provider.

<ContactContext.Provider value=*{*{ contacts: state.contacts }*}* \>
{props.children}
</ContactContext.Provider>

Then in the App main component I pass all the Context and wrap the routes and pages.

I don't need to use memo in this case right?