State vs. Props
- Both are plain JS objects
- Both can have default values
- Both should be accessed/read via or
this.state
, but neither should be given values this way. I.e., both are readonly when using
- Props are intended as configuration values passed into the component. Think of them like arguments passed into a function (If you don’t use JSX that is exactly what they are).
- Props are immutable to the component receiving them. I.e., don’t change props passed to a component from within the component
- State is a serializable representation of data (a JS object) at one point in time that typically is tied to UI
- State can only be mutated by the component that contains the state. It is private in this sense.
- Don’t mutate the state of child components. A component should never have shared mutable state.
- State should only contain the minimal amount of data needed to represent your UI’s state. It should not contain computed data, other React components, or duplicated data from props.