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 differences between both state and props. Also, we will see situations where state or props can be used.

State: State can be considered as an instance of react component class and is majorly used for communicating 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 state object changes and the component will re-render itself which means it will change itself by the new values. Here is an example which will explain react state:

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:

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 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 on click on which new changes will be rendered on the component. The above code will produce the following output on the button click.

Popular Course in this category

React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (3,598 ratings)

Course Price

View Course

---

Related Courses

Java Training (40 Courses, 29 Projects, 4 Quizzes)Python Training Program (36 Courses, 13+ Projects)HTML Training (12 Courses, 19+ Projects, 4 Quizzes)

Output:

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:

If the component has a constructor, then props object should be necessary passed to 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:

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

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

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 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 restriction.
4. Props are generally set by parent component whereas state is governed by event handlers that is they are managed by the component itself.
5. 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:

Conclusion

After covering features of both state and props, we have concluded that whenever there exists a possibility of property changes related to a component, then we should prefer state as it allows the re-rendering of properties. Props, on the other hand, allows 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