00:00 So here's what we want to do We want to switch to a different context so that we're no longer consuming the context that changes when the state changes We're going to call that use footer dispatch and as an extra credit. We're going to memoize this We'll take a look at that here in a second. So to make this work, we're going to rename this use footer to use for state and

00:21 We'll make a function use footer dispatch, which is basically just the typical use the context yada yada yada Except our context will be our footer dispatch whoops footer this patch context

00:38 And whoops footer dispatch context good grief copy and paste there we go and Then our use footer that we were doing here before and this is going to be used for your state Okay, so that is fine right there. We've got our use footer dispatch now

00:54 We need our dispatch context and actually this footer context is now going to be footer state context Okay, so let's come up here. Let's also take that error message. It'll be helpful to users of our hooks so we'll come up here to our state we'll have our

01:13 Const footer dispatch context create context and it's just going to include. Oh, come on AI assistant. You're amazing Hooray That is awesome. Oh, yep or no. Yep. That's that's right. Let's go Sick. Okay, so this is complaining because we've got

01:33 Some funny stuff going on here. Oh, let's see. Oh My AI assistant you were almost perfect There we go. Okay, so that's our footer dispatch. We've got our set color and set name all set up there We default to null perfect stuff. There's this little tip here from Marty the money bag

01:50 You can actually change the way that these different context providers appear in the dev tools. We'll look at that here in just a second let's remove the name or set name and set color from this one and Well, we actually don't need to remain it rename this to footer state context because I already did it. Hooray

02:10 Okay, great. So coming down here. We've got our footer state value and that is a use memo of the color and name and then we've got our dispatch value will be the set name and set color and

02:25 That will just be an object that's memoized and because these things never change then this object will never change Through the lifetime of this footer provider. Okay, great So now let's see how good the our AI assistant is here AI assistant still thinks that you need the dot provider

02:43 That used to be the case we no longer need that so get rid of that nonsense and Yeah, we render the footer state context. Here's our value footer dispatch context. Here's our value and we render our children inside of that With that now the app works I can click on this and if I make a change to the context value

03:03 Then would you look at that our footer provider re-renders that makes sense our footer to re-renders that also makes sense but our Our actual footer setters do not re-render so that saved us a re-render there for from splitting our context

03:19 now if we do what Hannah hundred and Marty the money bag suggest here, then these Components here will be a little bit more clear. So let's do that our Dispatch context and in there we Do this again and change this and stop Then here we get our much more helpful

03:42 Names their footer state context and the footer dispatch context. So display name can be helpful I don't always do that. But yeah, sometimes I will do that to ease the process of debugging and stuff But yeah, here's the cool thing is our footer setters right now It will only re-render when the context changes

04:01 Which is never because these are stable values and we've memoized them or when its parent re-renders so if we run this again and We update the app count then you'll notice that the footer setters Does appear in here and so what Hannah hundred is saying is this thing doesn't accept any props So if you memoize this it will never re-render ever

04:22 so we'll say whoops memo and I'll come down here close that off and Whoops, you gotta give it a name. There we go Save that and check this out. Now. There's no scenario in the world where

04:37 This could ever possibly re-render the setters. It'll render once and never render again. So here we've got our app. We've got our main we are Providers all that then next thing. It's just the main that was for our account and then we've already seen in these other scenarios where we're changing the value of the state or the of our

04:58 Context values that this doesn't re-render. So there's no scenario where the footer setters could ever re-render which is yeah That's kind of fun and interesting. Is it totally practical? I wouldn't say that. It's completely impractical There are definitely situations where this makes sense, but it's not 100% practical now

05:18 I haven't seen a lot of situations or any situations in my own production code where splitting the context actually Was necessary, but you might