DEV Community

Anil Kushwaha
Anil Kushwaha

Posted on

What is the difference between State and props in ReactJs?

State - This is data maintained inside a component. It is local or owned by that specific component. The component itself will update the state using the setState function.

Props - Data passed in from a parent component. props are read-only in the child component that receives them. However, callback functions can also be passed, which can be executed inside the child to initiate an update.

The difference is all about which component owns the data. State is owned locally and updated by the component itself. Props are owned by a parent component and are read-only. Props can only be updated if a callback function is passed to the child to trigger an upstream change.

The state of a parent component can be passed a prop to the child. They are referencing the same value, but only the parent component can update it.

Top comments (4)

adriantoddross profile image
Adrian Ross • Edited

Simple and to the point. Thank you! I'm a jr. dev, just finished coding bootcamp last year and still struggle with explaining state vs. props sometimes. It was cool to just be able to quickly read this and also see clear explanations of how state and props are used as well.

harittweets profile image
Harit Himanshu

Nice! Maybe you want to add some code samples for community to learn more about what it is to create state and use props!

tennerick profile image
adesunloye Adeola

nice this definitely helps

samizad profile image
Sami Zad

Nice read