React State Vs Props

one of the greatest things about react is its ability to manage your data and properly rerender your application when your data changes but there are two main ways in react to think about data there's props and their state and it can be a bit 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 a state is and why you should use props versus state inside your application so without any further ado let's get started now welcome back to web dev simplified my name is Kyle and in this channel I'm here to simplify the web for you so if that sounds interesting make sure you subscribe to the channel for more videos just like this one now 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 as 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 going to pass to that counter is going to be the initial count essentially what your 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 it's 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 that 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 going to also store that in the props because what you want your function or your component to actually take is going to be the props in 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 rerender 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 state is handled inside of that component and props are handled outside of the component so in the example of our counter application your current of today count is handled inside of the state so while we pass in the initial count in our props we're 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 the component another thing about state vs. props is when you change the state inside of your application it's going to re-render 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 state stored somewhere else in your application that's being passed down as props going back to our subtitle entitled 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 we're 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 rerender and update your application based on something the user has done so if you want to change something in your application you need to store that in state so that it properly rear Enders 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 coding 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 and description down because we want to render those and we don't just want a component that renders the same title and description we want that title and description to be different so we're going to use props in order to make that dynamic based on what we pass to that component but with our counter application we have some count that we need to update inside of our state so we're going to 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 check box select a 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 to 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 only 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 are 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 props are 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 differences between state and props if you want to dive further into more details and nitty-gritty of react make sure you check out my ract 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 can 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

Channel: Web Dev Simplified

Views: 71,224

Rating: 4.8152609 out of 5

Keywords: webdevsimplified, react state, react state vs props, react props, react props and state, react state management, react state props, state props, state vs props, react props explained, react props tutorial, react state tutorial, react state and props explained, react state and props tutorial, state and props in react js, state vs props in react js, react js state, react js props, react js state tutorial, react js props tutorial, reactjs tutorial, react js app, props, js, react

Id: IYvD9oBCuJI

Length: 5min 45sec (345 seconds)

Published: Tue Aug 27 2019