What is State and Props ?

State:

• It is an updatable structure that is used to contain data or information about the component and can change over time.
• State Can be modified using this.setState. State can be asynchronous
• The component can be directly accessed or modified inside the component.
• It is kept as simple as possible.
• It represents the component’s local state or information.

For Example,

[pastacode lang=”markup” manual=”class%20Test%20extends%20React.Component%20%7B%20%20%20%20%0A%20%20%20%20constructor()%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20this.state%20%3D%20%7B%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3A%201%2C%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22kaashiv%22%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%3B%20%20%0A%20%20%20%20%7D%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20render()%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20return%20(%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3E%7Bthis.state.id%7D%3C%2Fp%3E%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3E%7Bthis.state.name%7D%3C%2Fp%3E%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20)%3B%20%20%0A%20%20%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

Props:

• In UI that components in React are used again and again.
• In the component, we need to change the content inside.
• It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.
• From one component to other components, It allows the passing of data.
• While inside the component we cannot modify the props, because they are immutable.
• They are used to passing data between React components.

For Example,

[pastacode lang=”markup” manual=”class%20ParentComponent%20extends%20Component%20%7B%20%20%20%20%0A%20%20%20%20render()%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20return%20(%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CChildComponent%20name%3D%22Second%20Child%22%20%2F%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20)%3B%20%20%0A%20%20%20%20%7D%0A%7D%0A%0Aconst%20ChildComponent%20%3D%20(props)%20%3D%3E%20%7B%20%20%20%20%0A%20%20%20%20return%20%3Cp%3E%7Bprops.name%7D%3C%2Fp%3E%3B%20%0A” message=”” highlight=”” provider=”manual”/]

Difference between State and Props :

State	Props
Data passed within the component only.	Data passed from one component To another.
It becomes Mutable.	It becomes immutable
It is for both read and write.	It is only for read.
It becomes long for properties.	It becomes short for properties.
It can be modified.	It cannot be modified.
Performance is worse.	Performance is better.
It should be managed in your view-controller	It is used to pass data down from your view-controller
It pass down with props instead.	It is used to pass data to child components.