All language subtitles for 024 State vs Props_en

Let's talk a little bit about state versus props.

Now, one thing you may have noticed is that we have this parent component called app that's pretty

much surrounds everything in our app so far and only here we have state now this state we passed down

to the card list component.

As well, an attribute, right, just like we have HMO attributes, we sent down monsters and give it

our state.

So what you notice here is that as soon as we pass our state down to a component, this component receives

it as a prop.

And this is what you will usually see happening through our reps.

We have state, which often is something that changes because of user interaction.

Well, what changes because of user interaction?

The monster changes because when we click refresh on a page, we update the state monsters from an empty

array to a field and users.

Now this state trickles down our componentry as props to whoever needs it.

So if you remember this diagram, this idea of one way dataflow or uni directional dataflow, in our

case, we have this app component that's at the very top.

It's the parent component.

And then this component has state that whenever something changes in the state, it will trickle down

if we pass that information down to whatever component that cares about it.

Remember, we pass it down as an attribute so that state gets turned into props, into all these little

components that we pass it down.

In our case, the Kahless component gets passed down the while, the monsters, and they use it as props.

So remember, that state usually lives in just one location or a specific state, only one location,

and it trickles down as props if we go back to our monsters example.

If we open up developer tools here and remember, we use the react developer tools, if you don't have

it by now, I highly recommend that you download the extension from the Chrome Webster.

You see that we have the app on the right hand side.

It shows me that the state is monsters, which is array of 10 and search field.

Now, this search field, we haven't worked on it yet, so don't worry about it yet.

The key here is that we have these monsters and this state, if we go down, gets passed down to Cardless.

And right here you see that the props is monsters.

So even though it's the same thing, state turns into props when it gets passed down.

Now, if we go down even further to the core items we see over here, that these card items.

Get past the monster prop because we only passed on one monster at a time.

Now, you might also notice here the key that we gave each card, remember, key is used by react to

distinguish when multiple components are rendered one after another.

See here how we have all these card components, 10 of them, to be exact.

If one of them changes react, uses this key attribute to say, hey, Keith, we changed, do a quick

render.

So this is that internal react, working for us to make sure that when they update the dorm, it's going

to be efficient and only update one of the cards if it updates instead of all the ones.

But the reactive all tool is really, really useful to see how information is being passed out.

Now, again, remember the keys to being a great reactive helper.

The second point was to decide the state and where it lives.

Now, up until now, we've only had state in our app component.

But as we move further along in the course, you'll notice that we can put St. wherever we want to.

So before we even get to that, let's think about this.

I have here just a simple little tree like structure, and you can ignore the numbers for now, but

you can think of this as our app where we have the app, James, that has different components down

here.

Now, right now, in this orange part, this is where the state lives, so let me ask you this.

If the state changes right here, let's say our monsters grows from having 10 users to 20 users, what

happens?

Well, a state change, it's going to happen with state and then we're going to announce to whoever

cares that, hey, the.

Monsters Array has changed and whichever component.

Has those monsters passed down to is going to say, oh, I received new props, that means I have to

re render.

So again, it's going to say, hey, I have new information, who needs it and whoever needs it gets

passed on that prop information, so on and so forth.

So if you think of this as a function call to render, remember, each component at the end of the day

is a function that renders.

So if state changes, it's going to notify this component and say, hey, run the render function again,

hey, run the render functioning again.

Hey, run the render function again.

Hey, Ron.

The render function again.

So when we talk about deciding where state lives and how we passed on props, we can see here that there

are some performance implications because every time state changes, we're going to have to rerun functions

because the properties or the inputs or the function change.

Now, this idea of performance is something we'll talk about later on in the course when we learn a

little bit more.

But I want you to start thinking in terms of this tree that we're creating and how every time we introduce

state or data into our app, that data gets passed down as props.

Finally, remember that this robo hash that we're using right now is an API.

Same with the user's data.

So what we've done up to this point is essentially have an API call to get the users when we initially

load the page with our JavaScript seasoned HTML file, create react app just simulates, when we run

it a fake server that sends these files.

We get the users and it then gets each image of our monsters from another API, the robo hash.

So this is what we've built so far, but we have a lot more to go through.

So let's get started in the next video.