But there are two main ways in react to think about data.

There's props and their state, and it could be a big confusing to understand when you should use props and when you should be using state.

So in this video, I'm gonna break down exactly what props are exactly what state is and why you should use props versus state inside your application.

So without any further ado, let's get started now way.

Welcome back, Toe Web have simplified my name's Kyle on this channel.

I'm here to simplify the Web for you.

So that sounds interesting.

Makes you subscribe to the channel for more videos just like this one.

Not to get started.

I want to break down exactly how you use props and how you use state and what each of them is.

So first we're gonna start with props and props you can think about is like arguments to a function.

When you create a component inside of react and you want to render it, you're going to pass it.

The props that you want to give to it.

For example, let's say that we have a counter application.

The thing that you're most likely gonna pass to that counter is going to be the initial count.

Essentially, what you're count should start at, so you're going to pass your counter component, its initial count inside of the props.

And the reason we're using props for this is because props is kind of for things that you passed, like a function there, what you want to initialize your component to or what you want your component to render like So, in this counter example, we want our initial count to be zero.

So we're gonna pass it through in the props.

Something else that you can think of where you might need props is Let's say that you want to display something to the user that has a title and a subtitle.

You're gonna also store that in the props because what you want your function or your component to actually take is going to be the props and our case.

Our component is storing a title and a subtitle.

So we're passing those through the props and then our application knows if those props change at some point.

So, for example, something else in our application changes those props.

It'll rear ender that component for us because our props are now different.

But state, on the other hand, is quite a bit different.

State is something inside of a component.

So the big difference between props and state is props.

You pass into a component and status handled inside of that component, and props were handled outside of the component.

So in the example of our counter application, your current up to date count is handled inside of this state.

So while we pass in, the initial count in our props were just setting our state to that initial count.

And then inside of our component that's handling our counter.

We actually manage updating our counter to increase it or decrease it, depending on what the user does, and we're using state for that.

This is really the big difference between state and props.

State is handled in the component, and you can update it inside the component, while props are handled outside the component and must be updated outside of their component.

Another thing about state versus props is when you change the state inside your application, it's going to rear ender that section of your application.

But props, you can't actually change them.

You need to change them outside the component like we talked about.

Most likely it's going to be ST stored somewhere else in your application that's being passed down as props going back to our subtitle Entitle Component.

Most likely this component is not going to have any state at all, because it's all it's doing is rendering some text.

And that text is never going to change.

There's nothing in that component that can change, so it doesn't need any state.

It's just gonna take those two props and display them.

And that's all the component does, which is great.

It's just super simple, but with the counter were actually updating the count.

So we need state to store that thing that we're going to be updating, and that's really where state comes in Handy.

State is there for when you need to actually re render an update your application based on something that user has done.

So if you want to change something in your application, you need to store that in state so that properly re renders one that actually changes.

Props, on the other hand, are useful for when you want to display some information inside of a component without hard coating it.

Essentially, it's a variable to a function.

You can also think about it when you create a class with a constructor.

The things you pass to the constructor of that class are going to be the things that are your props for a component in react.

So, for example, we're going to be passing that title in description down because we want to render those.

And we don't just want a component that renders the same title in description.

We want that title description to be different, so we're going to use props in order to make that dynamic based on what we passed to that component.

But with our counter application, we have some count that we need to update instead of our state.

We're gonna use state to make sure we continually are able to update that based on user input.

Another example over state is really useful is inside of a form.

If you have an input element checkbox selected box, whatever it is that needs to be able to be updated by the user.

So we're going to actually use state to store what they're updating that value to and what they're changing that value, too.

And so on the place where many people get confused when wondering when they should use state versus props is they don't properly think about which one is going to be handled by the component.

If you're handling that piece of information inside the component and inside that component on Lee, nowhere outside of it like an apparent, for example, then you're gonna use state.

If you're handling that information outside the component in like a parent, for example, then you need to pass it in via props.

Those were really the main differences between the two.

Also, if your information is static and not going to change, for example, inside the component, you never need to update the title of that display section.

Then you want to use props because proper for things that are going to be passed down from the parent and don't change inside the component, but with the counter like I mentioned, we're updating that in the component, so we need to use state, and that's really the only difference is between state and props.

If you want to dive further into more details and nitty gritty of react, make sure you check out my rack course launching on September 10th linked in the description and the comments below.

And if you're coming here before it's launched, make sure you sign up for the email list where you could get an exclusive discount on the course when it launches.

So with that out of the way, thank you very much for watching and have a good day.