State Vs Props

State and Props are an important part of the React Application.

The State of a component is an item that holds some data that may change over the lifetime of the component. This change occurs according to the response to user action or system. It may be set by using the setState() technique and calling setState() strategy triggers UI updates.

Props mean "Properties." It stores the estimation of traits of a tag and works like the HTML attributes. It gives an approach to pass information from one component to different parts. It is like capacity contentions. Props are passed to the part similarly as contentions went in a capacity.

Both the concept has a different role in the React before start Difference. There is some similarity between them i.e. Both are the plain JS object, they both can contain default values also, and they both are read-only.

The Difference between State and Prop are as follows:

• Props are immutable because they can’t be modified whereas State is mutable.
• The state defines holding the information of the component while in Props the information may transfer from one component to another.
• The state is used to store the data while Props are used to pass data controlled by the handler.
• Props have the advantage to access by the child component whereas in State it doesn’t allow.
• Props allow communicating between the component while in the state it used rendering Dynamic changes.
• Props allow the component to be reusable while the state can’t do that.
• Props are external and controlled by rendering the component whereas Ther state is internal and control by the react component itself.
• The stateless component has Props but not State.
• Props are generally controlled or set by parent component whereas State is updated by Event Handler.
• The state is only used in Class component and Props are used by either function or class component there is no restriction.