Optimizing Performance of React Context

if you're using context within your react application you've probably already run into this issue at some point of time maybe without you even noticing it so where's the issue imagine I have three children wrapped by a parent and whenever I update the value for my parent for some reason children also get re-rendered as you can see children have this render ID number and they are generated on the Fly I just put them for testing purposes and whenever I press the button the session ID updates for the parent and children get re-rendered unnecessarily because as you can see the user ID is static child is static so nothing we have no props to the children but they still get re-rendered why because we're using the context in the wrong way let me also prove you that they are re-rendering by simply opening the reactive devtools like this going to components and open the view settings and here we need to make sure that highlight updates when components re-render is ticked on like this and whenever I press this update session button we're gonna see that our child components are highlighted with a marker and now you can see that every component is being re-rendered this is bad now you're probably not going to notice any difference in such a small application that I have but if you have a large application which has a big component tree you're definitely going to notice the difference and your application is probably gonna become sluggish so in order to avoid this we need to make sure that our react context is optimized so let's go back to our code and let's talk take a look at our children as I told you we don't really have any props except for the children to just render the child's number and we're doing it by passing it in the root component to so the root component has a parent and three children and we're also passing the session ID just to make sure that the parent updates whenever the prop changes and we're changing the props or by this by clicking on this button so session ID from the use state is being passed down and the parent ID looks interesting so we have a state here as well and it holds the current user ID so we also can set the current user ID and we also have a login method which logs the user in and does something but it's being triggered from the child all right and how does our context look like if I open this we can see that it's pretty much empty and it has a null as well so it doesn't even make sense to look at this alt context so the interesting here thing here is that we are wrapping our child so as you can see children which are coming from the root which is a child component we're wrapping it inside the auth context dot provider and providing this current user ID and login method as context values and inside the children which is this component we want to render the user ID so we simply grab the user ID from the context here which is being passed here like this and we also as I told you in the very beginning of the video I simply render a random number just to show that this re-rendering happens all right so why do children re-render when I simply update a value for my parent right they shouldn't be re-rendered the problem is here when we are passing the value to our context to be able to grab this value in our child component we are passing them in the wrong way first of all every time this parent JS updates the state re-instantiates it means that this value is going to be new every time the parent.js re-renders and it's the same thing with a login so it's a function which means functions in the background of JavaScript are still objects right and when the parent.js re-renders this um the child even though the child uses memo to make sure that it memorizes the props that are coming into it it's still gonna reference to the completely new function I explained all of that in one of my previous videos where I was explaining how you can optimize your props that you're giving to your children with a hell help of the use callback and use memo but this is pretty much the same issue although this is in the context of the context all right so how can we alleviate is this issue and make sure that children don't get updated when I update the parent so this is how we're gonna do it first of all we're gonna make sure that our login is not just a method but it's also using use callback so we're gonna do it like this use callback and it automatically got imported so let's use it the right way anyway also need to provide provide an array of dependencies but in our case we want to we want it to be instantiated only once so the array of dependencies is empty and to do to just make our life easier and we also know that we would like to wrap this current user ID in a memo as well we will create a new variable let's say context values and it's going to be something like this we're gonna use use memo like this and it accepts an anonymous phone function like this and Anonymous function is going to return an object which consists first of all of the current user ID so we're gonna put it here and the second is going to be the login so I'm going to using of course the modern JavaScript so otherwise you would have have to done it like this login so that you're passing the same variables but since I'm cool and I'm using the es6 features I'm simply going to remove them and I'm gonna use context values instead of the object that I'm passing here and that's it that should work and of course let's make sure that we also pass an array of dependencies with the use memo and here is the where the trick lies so we want to make sure that we only update our children when the user ID updates right otherwise we have no reason to update our children so we're gonna say update the children only when the user ID updates and that's pretty much it and of course our es link is going to complain because usually you want to use all the dependencies that you're referencing inside so let's also pass the login function oops not like this but like this and now no eslint complaints and we're good to go let's go to our child or our application take a look at our our child render IDs and I press the button and the session ID updates but our children are static and they don't get triggered so this is how you would optimize your context here's one interesting thing though and it's a pretty cool thought that I've already seen many people discussing so whenever you find yourself providing too many properties here inside your context and you need to make sure that not none of them are being updated so let me do something like this imagine we're passing like a lot of properties this could be a sign that you probably need to split your contacts so you have one context maybe create another context for a different domain for example one context can be responsible for authentication and another contact context can be responsible for the visual part of the authentication so make sure that you don't put everything into one context otherwise it can be cumbersome to manage it alright if you like this video and if you yeah learn something new today make sure you subscribe to the channel press like because it's gonna help the channel a lot and gonna show it to affiliate developers and I'm gonna see you in the next video goodbye

Channel: Software Developer Diaries

Views: 4,473

Keywords: software development, software developer, programming, software engineering, javascript, web development, coding, react, react tutorial, react context, react context api, react context vs redux, react context optimization, react avoid rerendering, react memo, react usecallback, react performance optimization, react beginner tutorial

Id: NMNo8Rz6ARg

Length: 7min 25sec (445 seconds)

Published: Mon Apr 10 2023