State Vs. Props
State
The React state is an updatable structure that is used to contain data or information about the component and can change over time. The change in react state can happen as a response to user action or system event. It is the heart of the react component which determines the behavior of the react component and how it will render. A react state must be kept as simple as possible. It represents the react component’s local state or information. It can only be accessed or modified inside the react component or by the react component directly.
Props
React Props are read-only components. It is an object which stores the value(data) of attributes of a tag and works similarly to the HTML attributes. It allows passing data(information) from one component to other components. It is similar to function arguments and can be passed to the react component the same way as arguments passed in a function. React Props are immutable so we cannot modify the React props from inside the component.
Difference between State and Props:
| SN | Props | State |
| 1 | Props are read-only | React State changes can be asynchronous. |
| 2 | Props are immutable. | State is mutable. |
| 3 | pass data(information) from one component to other components as an argument. | React State holds information about the components. |
| 4 | React Props can be accessed by the child component. | React State cannot be accessed by child components. |
| 5 | React Props are used to communicate between components. | used for rendering dynamic changes with the React component. |
| 6 | Stateless raect component can have Props. | Stateless react components cannot have State. |
| 7 | React Props make components reusable. | React State cannot make components reusable. |
| 8 | external and controlled by whatever renders the react component. | internal and controlled by the React react Component itself. |