React state vs props

Around a month into learning & working on react, I was confident I understood the core concepts & most of the basics, if not some of the advanced topics. That's when i casually mentioned to a friend about my progress & in good humour, she asked me a simple question. 'What is the difference between props & state?' I was blank. I knew how to use them but didn't know how to put it in words. Sometimes the simplest things might be the hardest to understand deeply. I spent sometime to sit & think about the main differences & list them out as my first tech blog post! :D

Differences between react state & props:

STATE:

1. State is the data that component maintains.
2. States can be defined in the component itself, or can be passed.
3. State is mutable i.e, components that have access to changing the state, can do so for all components including it’s parent.
4. It can be set 2 ways. As an object in the constructor in class based components, and using ‘use State’ hook in function components.

PROPS:

1. Props are arguments passed into react components via HTML attributes.
2. Props are passed down from parent components, i.e have uni-directional flow.
3. Props are immutable. They are like information passed down & cannot ideally be changed by child components.
4. Props are set/defined as attribute & value in parent component. It is passed down to children and accessed via the ‘props’ keyword in functional components & ‘this.props’ keyword in class based components.