Share:

R

Rupali Yadav

in

react

Sept 20, 2022

Difference between a state and prop in react

#stateVsProp

#State

#props

#javaScript

#reactjs

#webexpe

#webexpe.com

#rupali yadav

#rupali

In this article we are going to see the difference between state and props in React.
First let's see what are state and props individually.
props vs state in react | Rupali Yadav

#. Props

Props are something that a component receives from where it is rendered (consider as arguments). In the example below we are rendering Header component and passing a prop title to it. It is same like calling Header component with an object {title: 'Home'}
<>
<Header title="Home" />
...
</>

# State

A state can be considered as a local variable in the component that cannot be accessed outside of the component.
const [count, setCount] = useState(0);

# Similarities

  • Both are responsible for what a component should render i.e. the app will rerender if a prop or state changes
  • A state and prop both can be passed down as props to child components

# Differences

  • A state is both readable and writable but on the other hand a prop is read-only.
  • The initial value for a state is set inside the component and for a prop we may set the default value inside the component where the prop is sent to.
  • Props are usually used for rendering reusable components with static content and a state can change over time depending on various conditions/ user interactions.

Thanks for reading with us till here 🙂. If this article helped you please follow me on twitter, github and linkedIn for more such articles and other updates.
If you have any queries please write them below.

More from Author

What is hoisting in Javascript
What is hoisting in Javascript
Difference between pass by value and pass by reference in javascript
Difference between pass by value and pass by reference in javascript
How to use ref to style in react
How to use ref to style in react

Share:

Copyright © 2022 Web Expe

Privacy PolicyTerms and Conditions