Two Objects
Both props and state are just JavaScript objects. The difference is that state is managed from within a component, while props is something passed to a component. Keep in mind, the state in one component can be passed to another component, making it a prop of that component. The React docs say you can think of props as akin to a function parameter, and state is more like a variable declared within a function.
More
This article is linked from the official React website and explains it more. I always like getting links from official sources, because any yahoo can write a blog post about what state vs props are and you have no way of knowing if they are blowing smoke. This blog is a good example! I have no clue what I am talking about but someone new to React might not realize it.
The main responsibility of a Component is to translate raw data into rich HTML. With that in mind, the props and the state together constitute the raw data that the HTML output derives from.
You could say props + state is the input data for the
render()function of a Component, so we need to zoom in and see what each data type represents and where does it come from.
- Both props and state are plain JS objects
- Both props and state changes trigger a render update
- Both props and state are deterministic. If your Component generates different outputs for the same combination of props and state then you’re doing something wrong.
Which One?
So which one should you pick? Both seem similar. Well the article has this to say:
If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.
I think of it as any data that a component renders which can change based on something like user input should be state. Again this does not mean that any component that has changeable data should handle it’s own state, because the less components that have state the better. Instead in React the state is usually controlled in the parent component and passed down to components that need it as props.
Props
Properties, these are not changeable by the receiving component.
State
The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serializable* representation of one point in time—a snapshot.
State And Components
So there are two types of components, stateless and stateful. Back in the dark ages it used to be that only class based components could handle state. Now functional based components can also handle state with React Hooks. Stateless components don’t have state, they can only use props. Stateful components can use both