Props
Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).
State
React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.
Difference
- Components receive data from outside with props, whereas they can create and manage their own data with state
- Props are used to pass data, whereas state is for managing data
- Data from props is read-only, and cannot be modified by a component that is receiving it from outside
- State data can be modified by its own component, but is private (cannot be accessed from outside)
- Props can only be passed from parent component to child (unidirectional flow)
- Modifying state should happen with the setState ( ) method
| SN | Props | State |
|---|---|---|
| 1. | Props are read-only. | State changes can be asynchronous. |
| 2. | Props are immutable. | State is mutable. |
| 3. | Props allow you to pass data from one component to other components as an argument. | State holds information about the components. |
| 4. | Props can be accessed by the child component. | State cannot be accessed by child components. |
| 5. | Props are used to communicate between components. | States can be used for rendering dynamic changes with the component. |
| 6. | Stateless component can have Props. | Stateless components cannot have State. |
| 7. | Props make components reusable. | State cannot make components reusable. |
| 8. | Props are external and controlled by whatever renders the component. | The State is internal and controlled by the React Component itself. |
The below table will guide you about the changing in props and state.
| SN | Condition | Props | State |
|---|---|---|---|
| 1. | Can get initial value from parent Component? | Yes | Yes |
| 2. | Can be changed by parent Component? | Yes | No |
| 3. | Can set default values inside Component? | Yes | Yes |
| 4. | Can change inside Component? | No | Yes |
| 5. | Can set initial value for child Components? | Yes | Yes |
| 6. | Can change in child Components? | Yes | No |
