This Context API Mistake Ruins Your Whole React App (All Components Re-Render)

there's one big mistake that some people make with the react context API let's take a look so I have a simple example here I just have an app and in there I have two example components right you can have multiple components in the same file no problem now let's say that this example component 1 needs to keep track of some count so we say count set count you state let me import this and now let's say during development we find out that component number two also needs access to this count State well typical Behavior would be to lift State up to their parent component so let's remove it from here and let's add it here in this component if we do this we can now pass the count and if we want to set count fire props now in the real world often a lot of components need access to it and you don't want to do all the prop drilling so instead you can use the context API so let's do that you can do it outside the component function we can just call that count contacts and we can say react.createcontacts now I like to just use the function name so remove the react in front of it but then we do have to import it from react now the value here is not going to be the initial value it's just a value that you specify here that you will get if you try using the context outside the provider component that we'll create in a second so now we have this count context and then we can wrap the part of our app that needs access to our value here in a provider component and I already get the suggestion here from copilot so we're going to wrap these two components in this provider component right so we get this dot provider component from our contacts there and then you can pass the value that you want to be able to consume in these components so we're passing on object here with count and set count that's this state and now we can use it in these components that are wrapped inside of here so in this component example one actually I'm going to get a suggestion again from copilot I can now grab the counts and set counts with use context and then providing the name of the context let me also input this all right now to show you what the mistake is I'm not going to consume the context in the other one right so here we're only going to consume it in this one and the ID of the react context API is now if we make a change to this date it's only the components that are using that context that got re-rendered that's the idea but the way that we've done it right now is that all of these components in here will re-render let me quickly prove that to you I'll quickly log something in both components so here number one rendering and we'll also add that here number two rendering so this one's not doing anything it's not using the context and let's add a button so we can change the state to see what happens so in this component one I will add a button click me and what this will do is on click it will just increment the count so now only component One is using the context and we can update the value here as component 2 should not be affected by this let's open up the dev tools and go into console Let me refresh here okay so they are initially rendering of course now let's see what happens when I click on this button now if I click on this button you can see they are both re-rendering and that's not supposed to happen with the react context API because only this component One is using the context and the way it's supposed to work is that only the components that are actually using the contacts they should re-render when the value of that context changes right so I'm not even using that value from the context here but component 2 is still re-rendering every time count changes right and this is really inefficient because imagine that you have this provider high up in your component tree and you're doing it like this your whole app would re-render every time you make a change so this would be a big mistake and let me actually zoom out a little bit so we have a better overview so what is the mistake that we made here it looks like it's supposed to work like this and the difference is indeed quite subtle so let me quickly show you how to do it properly so to solve this let's create a separate file here I will call that contexts we can have multiple contexts and this is going to be our account context and here's where we're going to recreate a function called count context provider and this is where we're going to take care of all the context of stuff so let's copy this and paste that here and now we're going to use the state in there as well so we're going to remove it from the app and we're going to put this in this provider component and we will remove this for now okay so this is what looks now we'll get an error because I'm trying to use a context here that doesn't exist let me remove this alright so right now we don't have a provider component in our app so let's create that one here so here is where we're gonna have count context.provider indeed with the value and now the trick is to use the children prop and let me close this here so if I save here what we need to do is we need to wrap part of our app again that we want to give access to that value right so now let's add the component here and it's going to be the count contacts provider component right we can import that like this and let me also add the closing tag here and now it looks very similar as before but now what we get here in this provider components is we have these children so you get access to that here in props so here then we can access that with children and what we need to do here we just need to pass through those children right so if I save here the errors should disappear so let me restart and I should create contacts and use States so now if I save here and refresh we still get an error because I also need to export the count context because here we're using the context that needs to know which particular context so let me input that here all right so now when I save you see any errors disappear and now if I click you can see it's only component 1 re-rendering which is correct because this one is using the context and this one is supposed to re-render and the other component which is not using this context is not getting re-rendered right so when you're using the react context API make sure that you have some kind of structure like this with the children prop and not like we had before where you're essentially re-rendering the whole app every time and so make sure you've mastered the fundamentals of react check out my reactor next to S course and also make sure you've mastered the underlying fundamentals about JavaScript as well as CSS I have courses on them both check out the links in the description thanks for watching and I hope to see you soon bye

Channel: ByteGrad

Views: 29,931

Keywords: react context api, react context, createContext, useContext, react

Id: 16yMmAJSGek

Length: 5min 36sec (336 seconds)

Published: Wed Aug 02 2023