00:00 A common question that people have is, let's say I've got a structure of components. I've got my app, then I've got this component, that component keeps on going down. And then there's a point where I have some state that's managed over here, but then this other like second cousin twice removed or whatever component needs access to that state

00:19 to display something. So the problem is that state is managed over here. So how do we share that? And the solution is lift it up to the least common parent. So like talk to each other. Oh, that's your grandparent. Oh, that's mine. Great. Okay, so go to that parent, move the state to that, and then send the state and the state updater

00:38 down to the components that need it. That's what we call lifting state. So here's an example in code. We've got our app and here's our counter. This is managing its state. And then let's say we want to have a fancy counter display or a count display. So we have this, how do we get the state that's managed inside the counter over to the count display?

00:58 Well, what you do is you move the state from the counter up into the app, and then you can pass that value and the mechanism for updating the value down to the counter and then whatever else you need down to the sibling right here. So that works out nicely. The challenge is like this,

01:17 most developers in the React ecosystem have got this nailed. Like this is pretty straightforward to do. And once you've done it, then you get used to it and you just continue on with your life. The problem is when things change because they're constantly always changing, how do you know when it's time to move in the other direction?

01:38 So here, what if we say we no longer need that count display and we've got, so we delete it and now we're passing the count and the set count down to the counter. This will work. So like whereas before it didn't work until you lifted state, this inefficient use of time

01:57 is actually still going to work. So the app is going to re-render anytime the count changes, even though the app doesn't actually care about the value of the count. This should be located inside of the counter. More than that, it just complicates the app to have to worry about state that doesn't matter to anything but a single child. And so if you ever have a component

02:16 that's managing state that is not used by anything other than a single child, that state should move down to that child. And so that's what we can do here. We can co-locate the state. So we have the idea of lifting state and then we have the idea of co-locating the state, moving the state back down. And we're going to be exploring that in this exercise, both lifting and co-locating state.

02:36 I hope that you're ready to like some posts because that's what you're going to be working with in this one. And we're going to be doing a couple interesting variants of this too. It's going to be more than just a count value, but like whether a thing is favorited. And now we've got an array of favorited IDs and yeah, it's going to be pretty interesting. I think you'll like it. So let's get into it.