Home >>ReactJS Tutorial >React state vs props

React state vs props

State Vs. Props

State

The state is an updatable structure that can change over time, and is used to contain data or information about the component. The change of state will occur as a response to user action or system event. It is the core of the component reacting which determines the component 's behavior and how it will render. You have to keep a state as simple as possible. It represents the local state, or information, of the part. This can only be accessed or modified directly within the component or via the component.

Props

Props are components of read-only use. This is an object that stores a tag's attribute value, which functions like the HTML attributes. It allows data to be transferred from one component to another. This is similar to function arguments and can be passed as arguments passed in a function to the variable. Props are immutable so we can't adjust the props within the component.

Difference between State and Props

SN Props State
1. Props are read-only. Changes in State can be asynchronous.
2. Props are immutable. State is mutable.
3. Props allow you to transfer the data as an argument from one component to other components. State keeps data on the components.
4. Child component can access by props. Child components can't access state.
5. Props are used to communicate between components. With the component, states can be used to render dynamic changes.
6. Stateless component can have Props. Stateless components cannot have State.
7. Props make components reusable. State cannot make components reusable.
8. Props are external, and controlled by something that renders the component. The State is internal and is itself controlled by the React Component.

The table below will guide you on the change in props and state.

SN Condition Props State
1. Can get initial value from parent Component? Yes Yes
2. Can be changed by parent Component? Yes No
3. Can set default values inside Component? Yes Yes
4. Can change inside Component? No Yes
5. Can set initial value for child Components? Yes Yes
6. Can change in child Components? Yes No
SN State and Props
1. Both objects are plain JS.
2. Both can be set to default values.
3. Both of these are read-only when they use it.