Blog React Props vs State

Most of the times I found beginners confuse between when to use state and when to use props. So, I thought let’s write an article about it.

State

State is nothing but a way to manage data inside a component. The main reason of using state instead of a normal object is that whenever we update a state using setState its re-render the component so that we can see the new data on the webpage.

Example:-

The below example initialize the state with count value 0 and it renders the count value and an button which basically increment the count by 1.

Blog React State Example

Props

Props is nothing but a short form of properties. Props are any value send from parent component to child component. The props are not allowed to be edited. In some cases if parent does not provide props then its uses default props set by the user using package prop-types.

Example:-

In the below example we just passed count and onClick to the PropExample component.

https://codesandbox.io/embed/react-example-01iim?fontsize=14&hidenavigation=1&theme=dark
Categories: Reactjs

4 Comments

cemalettin · February 16, 2020 at 8:44 pm

Thanks bro , keep blogging =)

You guys have medium account to follow you ?

Full Guide to destructuring in React with ES6 - Blog React · February 12, 2020 at 3:46 am

[…] If you are a beginner you should check out below article on props and state here. […]

Full Guide to Hooks vs Classes in React - Blog React · February 17, 2020 at 4:20 am

[…] Understanding State and Props in React Types of React Components: All developers must know Post Views: 7 Categories: Reactjs Tags: ReactjsReactjs Advanced […]

Comments are closed.