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).
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.
- 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
|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.
|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|