Scribd
Upload
71 views2 pages

React State vs Props Explained

State and props are both used to pass data to React components. State is mutable and internal, used to track a component's dynamic data and trigger re-renders when changed. Props are immutable and external, passed from a parent component to control a child component. Key differences are that state can be modified internally while props cannot, state changes can trigger asynchronous updates, and props allow reusable components while state does not.

Uploaded by

Abhishek Jablameti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
71 views2 pages

React State vs Props Explained

State and props are both used to pass data to React components. State is mutable and internal, used to track a component's dynamic data and trigger re-renders when changed. Props are immutable and external, passed from a parent component to control a child component. Key differences are that state can be modified internally while props cannot, state changes can trigger asynchronous updates, and props allow reusable components while state does not.

Uploaded by

Abhishek Jablameti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

7/31/22, 3:14 PM ReactJS State Vs Props - javatpoint

State Vs. Props


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

SN Props State

1. Props are read-only. State changes can be asynchronous.

2. Props are immutable. State is mutable.

3. Props allow you to pass data from one State holds information about the
component to other components as an components.
argument.

4. Props can be accessed by the child State cannot be accessed by child


component. components.

5. Props are used to communicate between States can be used for rendering
components. dynamic changes with the
component.

6. Stateless component can have Props. Stateless components cannot have


State.

7. Props make components reusable. State cannot make components


reusable.

https://www.javatpoint.com/react-state-vs-props 1/2
7/31/22, 3:14 PM ReactJS State Vs Props - javatpoint

8. Props are external and controlled by whatever The State is internal and controlled
renders the component. by the React Component itself.

The below table will guide you about the changing 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

Note: The component State and Props share some common similarities. They are given in the
below table.

SN State and Props

1. Both are plain JS object.

2. Both can contain default values.

3. Both are read-only when they are using by this.

https://www.javatpoint.com/react-state-vs-props 2/2

You might also like