Colocate State

[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

[00:00] So, as does happen sometimes, the users finally got to use the feature where they heart something and it shoots up to the top and they thought, whoa, that's a little bit, a little bit much. I don't like it. So Kelly, our coworker, fixed it. So now it's no longer sorting based on the favorite state.

[00:18] But one thing Kelly didn't do is change the way that the state is being managed. So it's still an array of favorites from the matching post and we should co-locate that, right? So it would be a good idea to just get that pushed down to the bottom. So that is your job.

[00:36] We're going to pretty much just rewind everything that we did before so that we can have a simpler final result of our code. So your job, we've already removed the sorting functionality, but your job is to push the state down, co-locate the state so that it is managed where it needs to be managed. Good luck.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Hooks

Transcript

Colocate State

Transcript