00:00 Let's come on down here to our matching posts and we're going to co-locate this state back down to the card So we're no longer going to be sending any of this information down Drastically simplifying this card component. We no longer need this no longer need that and then we're going to add is Favorited and

00:19 We'll initialize that to false and then on favorite quick instead of that. We'll just call set fit is favorited or set Yeah set that And with that now we have the same behavior we had before

00:33 but it it's a now drastically simplified our matching posts and our card because we co-located the state and that's that's it except some of you probably noticed that there is a This does actually impact things a little bit. So you'll notice we have this caring for your feline friend if I

00:53 Type in dog that post didn't have the word dog in it So it's no longer here and then if I get rid of this Carrying for your feline friend is actually no longer favorited anymore. And the reason is because the state that was with this card

01:09 got removed it's gone now and now we have a new instance of the card once it came back with the same data and now it's been initialized to false and so that's something to keep in mind as you're moving state around is like where it's Located is where

01:23 That state is going to be removed and reinitialized. And so well, we're gonna leave it this way because I want you to learn about Lifting and co-locating state. It is important to keep in mind that like if it need if it should be persisted to probably or if you would expect it to be persisted probably needs to be

01:42 We're not getting that far into things in this workshop as far as like persisting stuff in a database or anything But it is useful to understand that that state is co-located for that instance of the component once that instance is gone That state is gone, too And so if we wanted to preserve this through the life of the application

02:01 You actually would need to lift it all the way up to the app And even then when you refresh the page, all of those favorites are gone, too So you actually need to persist this in the database and stuff and that gets into full stack web applications and all that stuff Which is outside of the scope of this workshop

02:18 But the thing that you were supposed to learn from this is that our UI state for this card Could be pushed down into the card And so by doing so we actually simplified both the matching posts as well as the API for the card in addition another thing we got out of this was we

02:35 Actually improved the performance as well because before because the state was being matched Stored in the matching posts anytime you changed one of these hearts It would have to re-render all of the matching posts because it's not sure which one of those Which one of these elements actually depends on that state so it re-renders all of that the component

02:55 By moving it down to the card now. It's only going to re-render the card that is affected by the state change So co-locating state actually also is a performance improvement as well So in general you want to co-locate state as much as you possibly can You do want to keep in mind that when that component is gone that state is gone with it

03:16 And in most cases like you'll know when that situation arises if you need to actually persist it It's going to come from a database and that brings in the whole full stack stuff that we'll get into in another workshop entirely Okay, great. I think you've got a pretty good idea of Lifting state and now co-locating it so awesome work