The blog provides the listing of differences between React JS State and React JS Props.
The State is used to contain data or related information about the component in React and determines the component behavior and depicts how the data is rendered to the DOM Structure. The usage of State makes the component more dynamic and interactive. The State represents the component’s local state and can be modified inside the component or sometimes by the component directly.
Props in React are similar to properties which are read-only and are passed as argument within the component. It acts as the function arguments and allows to share data among components. Props are immutable as we cannot modify the values of props within the component. Thus , it is preferred to define the components with the State which can be updated with the change in the component.
What is common between State and Props
- Both ReactJS State and Props can get initial value from parent Component
- Both ReactJS State and Props can set default values inside Component
- Both ReactJS State and Props are plain JS objects
Difference between ReactJS State and Props
|React JS State||React JS Props|
|State is used to contain data or related information about the component in React||Props in React are similar to properties which are passed as argument within the component|
|State of the component can be modified||Props in react are read only|
|State is mutable||Props is immutable|
|States helps in rendering the modifications with the component||Props are used to communicate between components|
|State is restricted to be accessed by child components||Props can be accessed by the child component|
|State holds component data||Props allows to pass data using arguments between components|
|State cannot be used as reusable components||Props can be used as reusable components|
|State is internal to the react components||Props are external used to pass arguments between components|