State vs Props in React

By Shivam SinghDecember 7, 2022Updated:December 22, 2023No Comments3 Mins Read

State vs Props: State is referred to the local state of the component which cannot be accessed and modified outside of the component and only can be used & modified inside the component. Props, on the other hand, make components reusable by giving components the ability to receive data from the parent component in the form of props.

wqvF2 — Props vs State | PC: Stackoverflow

Table of Contents

State

The state is an updatable structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. A state must be kept as simple as possible. It represents the component’s local state or information. It can only be accessed or modified inside the component or by the component directly.

Props

Props are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It allows passing data from one component to other components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component.

Difference between State and Props

State	Props
State changes can be asynchronous.	Props are read-only.
State is mutable.	Props are immutable.
State holds information about the components.	Props allow you to pass data from one component to other components as an argument.
State cannot be accessed by child components.	Props can be accessed by the child component`.`
States can be used for rendering dynamic changes with the component.	Props are used to communicate between components.
Stateless components cannot have State.	Stateless components can have Props.
State cannot make components reusable.	Props make components reusable.
The State is internal and controlled by the React Component itself.	Props are external and controlled by whatever renders the component.

The below table will guide you about the changing in props and state.

Condition	State	Props
Can get the initial value from the parent Component?	Yes	Yes
Can be changed by the parent Component?	Yes	No
Can set default values inside the Component?	Yes	Yes
Can change the inside Component?	No	Yes
Can set an initial value for child Components?	Yes	Yes
Can change in child components?	Yes	No