React State:
The state is an updatable structure. In a component, change in state over time can happen. The state is used to contain data or information about the component and also take the responsibility to make a component dynamic and interactive. The components that have their own state are known as a stateful component, while the components that don’t have their own state are known as a stateless component.
React Props:
Props or “Properties” are read-only components, that gives a way to pass data from one component to other components. It stores the value of attributes of a tag. It is an immutable object that works similarly to the HTML attributes. The props cannot be modified from inside the component as they are immutable. But we can add attributes called props, inside the components. The props are thus used to add immutable data in the component.
Below is a comparative study of React State and React Props.
| PROPS | STATE |
| Is a plain JS object. | Is a plain JS object. |
| Can contain default values. | Can contain default values. |
| Is read-only when it is used by this. | Is read-only when it is used by this. |
| Is read-only. | Can be asynchronous. |
| Is immutable. | Is mutable. |
| Allow the user to pass data from one component to other components as an argument. | Holds information about the components. |
| Can be accessed by the child component. | Cannot be accessed by child components. |
| Used to communicate between components. | Can be used for rendering dynamic changes with the component. |
| Stateless components can have them. | Stateless components can not have them. |
| Make components reusable. | Make components reusable. |
| Are external and is controlled by whatever renders the component. | Is internal and is controlled by the React Component itself. |
| Can get initial value from parent Component. | Can get initial value from parent Component. |
| Can be changed by parent Component. | Can not be changed by parent Component. |
| Can set default values inside Component. | Can set default values inside Component. |
| Can not change inside Component. | Can change inside Component. |
| Can set initial value for child Components. | Can set initial value for child Components. |
| Can change in child Components. | Can not change in child Components. |