Difference Between State and Props in React

Comparison between State and Props

State

The state is an updatable structure which is used for containing data or information about the component. The state in a component can be changed over time. This change in the state over time happens as a response to user action or system events. The components with the state are called Stateful components. It is a crucial part of the React component that determines the component's behavior and how it will render. They are also responsible for making a component interactive and dynamic.

Props

A prop is an abbreviation of ‘properties.' State and props are mainly different from each other because props are immutable. Props are the read-only components. It is an object which stores the attribute value of a tag, and its work is similar to the HTML elements. It helps to pass the data from one component to another component. Props are like function arguments, as props are similarly passed to the component as arguments passed in the function.

We cannot modify the props inside the component. We can add attributes called props inside the components. These attributes are available in the component as this.props and use for rendering the dynamic data in our render method.

Difference between State and Props

S.no.	Props	State
1	Immutable.	Mutable.
2	The child component can access them.	The child component cannot access it.
3	They are read-only.	State changes are asynchronous.
4	They allow you to pass the data from one component to other components as an argument.	It holds information about components.
5	The stateless component can have props.	Stateless components cannot have props.
6	Props make components reusable.	The state cannot make components reusable.
7	Props are external.	The State is internal. It is controlled by the component itself.

The table given below tells us about the changing in props and state.

S.no.	Conditions	Props	State
1	Can you get initial value from the parent component?	Yes	Yes
2	Can inside component change?	No	Yes
3	Can set default values inside component?	Yes	Yes
4	Can the parent component change it?	Yes	No
5	Can you set initial values for child components?	Yes	Yes
6	Can change in child components?	Yes	No

Similarities between Props and React

Props and React also have some similarities that are as follows:

• Both are read-only when using this.
• Both can have default values.
• Both are the objects of plain JS.