Difference between React JS State and Props

The blog provides the listing of differences between React JS State and React JS Props.

ReactJS State

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.

ReactJS Props

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 ReactProps 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 mutableProps 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 componentsProps can be used as reusable components
 State is internal to the react components Props are external used to pass arguments between components