EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials Top Differences Tutorial React State vs Props

React State vs Props

Priya Pedamkar
Article byPriya Pedamkar

React State vs Props

Difference Between React State vs Props

In this article React State vs Props, we will figure out major differences between two very important react components, state and props. We will cover some basic examples to figure out the differences between both state and props. Also, we will see situations where state or props can be used.

What is React, State?

State: State can be considered an instance of react component class and is majorly used to communicate with a component. The state of a react a component is an object that contains information that may or may not change over the lifecycle of a component. State object stores values of properties related to a component. Whenever there is a change in properties related to a component, the value associated with the state object changes and the component will re-render itself, which means it will change itself by the new values. Here is an example that will explain react state:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Code:

class Bike extends React.Component {
constructor(props) {
super(props);
this.state = {
Company: "Yamaha",
Modelnumber : "R15",
color: "blue",
launch-year: 2001
};
}
render() {
return (
<div>
<h1>Name {this.state. Company}</h1>
<p>
This is a {this.state.color}
{this.state. Modelnumber}
from {this.state. launch-year}.
</p>
</div>
);
}
}

Output:

React State vs Props Output

Now let us consider we want to change component properties. To achieve this, there exists a method called setState(). Note that you should always use the setState() method to change the state of a component; it will make sure that the component will re-render its state.

Code:

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
Company: "Ford",
Modelnumber : "Mustang",
color: "red",
launch-year: 1964
};
}
changeColor = () => {
this.setState({color: "green"});
}
render() {
return (
<div>
<h1>My {this.state.Company}</h1>
<p>
It is a {this.state.color}
{this.state.Modelnumber}
from {this.state.launch-year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change Bike color</button>
</div>
);
}
}

In the above code, we have added a button to click on which new changes will be rendered on the component. The above code will produce the following output on the button click.

Output:

React State vs Props2

What is Props?

Props: Props in ReactJs are used to send data to components. Props are equivalent to javascript pure function parameters. Since pure function parameters cannot be changed once assigned, we cannot change their values. The below example will show how props are used:

Code:

class Bike extends React.Component {
render() {
return <h3>This is {this.props.Companyname}</h3>
}
}
const component = <Bike Companyname="Yamaha" />;

Output:

props

If the component has a constructor, then the props object should be necessary passed to the constructor using super. Here is an example:

Code:

class Bike extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>This is a Bike</h2>;
}
}

Output:

constructor

Head to Head Comparison between React State vs Props (Infographics)

Below are the Top 4 comparisons between React State vs Props:

react state vs props info

Key Differences Between React State vs Props

Let us discuss some of the major key differences between React State vs Props:

  1. Props are immutable; that is, their content cannot be changed once assigned, but a state is an object that is used to hold data that can change in the future; also state controls the behavior of the component after the change is made.
  2. Both Props and states are used for storing data related to a component.
  3. States can only be used in Class components, whereas props do not have such restrictions.
  4. Props are generally set by the parent component, whereas event handlers govern the state; the component itself manages them.
  5. The state is local to a component and cannot be used in other components, whereas Props allow child components to read values from parent components.

Comparison Table of React State vs Props

The table below summarizes the comparisons between React State vs Props:

React State Props
React State is mutable, and its value can be changed as per requirement. Props are immutable; that is, their content cannot be changed once assigned.
States can only be used by class components. Props can be used by class as well as other components.
Set by the parent component. Set by event handlers, that is, they are completely managed by the component itself.
The state is local to a component and cannot be used in other components. Props allow child components to read values from parent components.

Conclusion

After covering both state and props features, we have concluded that whenever there is a possibility of property changes related to a component, then we should prefer state as it allows the re-rendering of properties. On the other hand, props allow child components to access methods that are defined in parent components; this minimizes a need in child components to have their state. Props are read-only in child components. It is worth noting that state and props are very important components of react architecture.

Recommended Articles

This is a guide to React State vs Props. Here we also discuss the React State vs Props key differences with infographics and comparison table. You may also have a look at the following articles to learn more –

  1. Jira vs Github
  2. ReactJs Interview Questions
  3. Uses of React JS
  4. React Components
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more