Learn the differences between props and state

Learn the differences between props and state

·

3 min read

Hello Coders 👩‍💻! In this article, we'll discuss the differences between props and state .

giphy.gif

🎯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.

🎯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.

🎯Difference between Props and State

PropsState
Props is data what child components need from parent componentsState is use manage data of same components
Props is directly proportional to it's parent componentsif state of components get update it will render the components
If props data change on parent components it will re-render the components and show the updated change in UIstate is use for logical operation in components
Props is used to show the data in UI of particular componentsstate is use for holds information about components
Props are immutable.State is mutable.
Props are read-only.State can be changed.
Stateless component can have Props.Stateless components cannot have State.
Props make components reusable.State cannot make components reusable.
Props can be accessed by the child component.State cannot be accessed by child components.

👉This table will guide you about the changing in props and state.

SNConditionPropsState
1.Can get initial value from parent Component?YesYes
2.Can be changed by parent Component?YesNo
3.Can set default values inside Component?YesYes
4.Can change inside Component?NoYes
5.Can set initial value for child Components?YesYes
6.Can change in child Components?YesNo

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

SNState 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.

giphy.gif

🎯 Wrap Up!!

That's all for this article🤩. Thank you for your time!! Let's connect to learn and grow together.

Did you find this article valuable?

Support <YouCanCode/> by becoming a sponsor. Any amount is appreciated!