We're using Context to pass down that state to our children. So we have childA, and all childA does is output countA. And we also have childB, which outputs the sum of A plus B. So let's take a look at the code here. We have our parent component. I'm also console.logging parent rendering, so we can see all the re-renders that happen. Here is our state. Here is our Context provider. We're passing down countA and countB as a value prop, so any children should have access to that.

We're passing down countA and countB as a value prop, so any children should have access to that. Here is our counter for countA, and same for countB. And here are our children. Now for simplicity, this component tree is only one layer deep, but pretend this was a larger application with a larger component tree, and these children potentially having their own children as well. So let's take a look at childA here. We're just grabbing countA from the Context and showing it here. We're also wrapping it in a react.memo to avoid any unnecessary re-renders.

You'll see that everything re-renders as expected. However, for countB, let me just refresh here. If I increment countB, obviously the parent should re-render. ChildB depends on B, so that should re-render as well. However, ChildA does not depend on countB, so you would think that that child should not re-render. However, if we do increment countB, you'll see that ChildA still re-renders. So that's just how the Context API works. If you take a look at the documentation here, you'll see that all consumers that are descendants of a provider will re-render whenever the provider's value prop changes.

I'm going to make use of this one called zustand, which I found to be very simple to use. However, any other state management tool like Redux should work as well. So let's install this into our application and use this instead of context. I'm going to do this really quickly. I'll have a dedicated video on zustand in the next video. So let's npm install it. Let's start our server again. If you take a look at the docs, you can create a global store like this. It returns a hook which you can make use of in your other components to grab the state that you need.

It returns a hook which you can make use of in your other components to grab the state that you need. So I'm going to make a file here called store.js and this will be where our global state lives. And I'm just going to paste the store in here. Again, we'll go over this in the next video. But this file should have all of our global state. So as you see, we have countA, we have countB, and we have increment and decrement methods for each of them. So now we can make use of this in our application.

for each of them. So now we can make use of this in our application. So let's get rid of context here. Let's go to app.jsx. Let's get rid of context up here. So we no longer need our counterContext. Let's get rid of our CounterContextProvider. Let's get rid of it down here as well. Okay, let me save that. Let's go ahead and grab our store.

Okay, let me save that. Let's go ahead and grab our store. So we are going to import from the store we just created. And now we can grab all the state that we need. So we no longer need useState here. I'm just going to paste in all the state that we need. In this case, we need everything. So again, we're making use of the useStore hook, and we're grabbing the state that we need. So we no longer need useState up here.

need. So we no longer need useState up here. decrementA and countB is named the same, but we need to replace our increment and decrement methods. So this would be decrementCountA. This would be incrementCountA. And same for the other one. So let me just replace this one with decrementB. And this one is incrementB. Okay, let's do the same for childA and childB. So let me save this. Let's go to childA here. Let's import the useStore.

Let's go to childA here. Let's import the useStore. We no longer need our context here. So we can get rid of this and use context as well. And we're just making use of countA here so we can grab that from our store. So let me grab that from app.jsx up here. We only need countA. Let's paste that in here. And that should be good. And same for childB. childB. No longer need our context.

And that should be good. And same for childB. childB. No longer need our context. Let's get rid of this. And also our counter context. Save that. Now we need childA and childB. So let me grab that from app.jsx. We need both of these. Okay. Let's go ahead and paste that in. We need the import as well.

So let's give that a try. And that is working as expected. So you can see childA is not re-rendering here because it's not making use of that state. So again, that's one main benefit of using a dedicated state management library. And some people might also argue that having a global store makes more sense. For example, in the Context API, we didn't really have a global store. We just stored the state we wanted to pass down in the root component. In this case, it was an app.jsx. And then we wrapped the entire app in a ContextProvider and provided the value prop as global state.