Props are a bunch of things someone else gives you. Someone else is responsible for storing them and handling changes to them (like giving you a function to call when you want something to change).
State is a bunch of things you store yourself that noone gives you and can pass along to others. You are responsible for storing it and deciding what to do when someone wants to change it. You can pass functions that can be called by other components to tell you when they want something to change.
It's up to you to decide if a given piece of data should live outside of your component, or inside the state of some component.
Generally, it's best to avoid all state in a component as it's not accessible to the outside world, and you definitely do not want to store values that are supposed to be coming from props in the state. That will hurt you later, since you would have to guarantee that your internal state always stays in sync with the props coming in.
I know this may be a bit premature, so feel free to skip the rest of this comment, but it will make so much sense later when you're comfortable with the concepts.
There are techniques to avoid having state within your component, like using a state library (tiny ones like Unistore, Reduxless, etc.) or just a simple component you can build using withState:
importwithStatefrom'./with_state';// the file above// this component just calls setState and shows the countconstCountButton=({count,setState})=>{constonButtonClicked=()=>setState({count:count+1});return(<buttononClick={onButtonClicked}>Iwaspressed{count}times.</button>
);};// this component is created with the starting state {count:0}constCountButtonWithState=withState(CountButton,{count:0});exportdefaultCountButtonWithState;
When used in your app:
importCountButtonfrom'./count_button';// the above fileconstApp=()=><CountButton/>
I also advocate an approach where all of the logic about converting data, formatting it, etc. is moved outside of the component, leaving just a small template behind. You can read about it in my other post:
Props are a bunch of things someone else gives you. Someone else is responsible for storing them and handling changes to them (like giving you a function to call when you want something to change).
State is a bunch of things you store yourself that noone gives you and can pass along to others. You are responsible for storing it and deciding what to do when someone wants to change it. You can pass functions that can be called by other components to tell you when they want something to change.
It's up to you to decide if a given piece of data should live outside of your component, or inside the state of some component.
Generally, it's best to avoid all state in a component as it's not accessible to the outside world, and you definitely do not want to store values that are supposed to be coming from props in the state. That will hurt you later, since you would have to guarantee that your internal state always stays in sync with the props coming in.
I know this may be a bit premature, so feel free to skip the rest of this comment, but it will make so much sense later when you're comfortable with the concepts.
There are techniques to avoid having state within your component, like using a state library (tiny ones like Unistore, Reduxless, etc.) or just a simple component you can build using
withState
:This is how you use it:
When used in your app:
I also advocate an approach where all of the logic about converting data, formatting it, etc. is moved outside of the component, leaving just a small template behind. You can read about it in my other post:
Make testable components using the Humble Object pattern
Klemen Slavič