React State vs Props – Difference Between State And Props

In earlier parts, we have learned about state and props. Now we will see the differences between React State vs Props one by one, both are actually important topics to learn, so it is also important to understand the differences as well.

Since we have already seen about props and state, and how much they are important. Now there are many questions raised like when we should use state?, when we should use props?, and what are the differences between them. So yes, this article will answer all of these questions, and we will understand their use cases and why these two concepts are too important.

Props

Props are read-only components. It is an object that stores the value of the attributes of a tag. It works similarly to HTML attributes. It allows data to be passed from one component to another. It works in the same way as function arguments and can be passed to a component in the same manner as arguments passed to functions. Props cannot be modified from within the component because they are immutable.

Let’s take an example of some code using react props:

import Fruit from './Fruit'
function App() {
	
const fruits=
	{
	name:"Mango",
	color:"Yellow"
	}

return (
	<div className="App">
	<Fruit fruits={fruits} />
	</div>
);
}

export default App;

Component in which we are accessing props:

import React from "react"

const Fruit =(props) =>{

return(
	<div className="fruit">
		<h1>List of Fruits</h1>
		<p>Name: {props.fruits.name}</p>
		<p>Color: {props.fruits.color}</p>
	</div>
)
}

export default Fruit;

State

The state is an updatable structure that can contain data and information about the component. It can also change over time. A user action or system event can cause a change in the state. The React component’s heart determines the behavior and rendering of the component. It is important to keep a state as simple as possible. It is the local state of information or status of the component. Furthermore, it cannot be modified or accessed outside the component.

Let’s take an example for a state use case:

import React, {Component} from "react"

class Car extends Component{
	constructor() {
		super()
		this.state={
			car: 'Ferrari'
		}
	}

	changeMessage() {
		this.setState({
			car: 'Jaguar'
		})
	}

	


	render() {
		return (
			<div className="App">
				<h1>{this.state.car}</h1>
				<button onClick={() => this.changeMessage()}>
				Change
				</button>
			</div>
		
		)
	}
}

export default Car

We have set a state which has some values, and we will use another component to access the state elements:

import './App.css';
import Fruit from './Fruit'
import Car from './Car';

function App() {
	
const fruits=
	{
	name:"Mango",
	color:"Yellow"
	}

return (
	<div className="App">
	<Fruit fruits={fruits} />
	<hr></hr>
	<Car />
	</div>
);
}

export default App;

Difference between React State vs Props

Props	State
Props are read-only components.	Changes in State are possible.
Props are immutable.	The state is mutable.
With the help of props, we can transfer data from one component to other components.	The state won’t allow you to transfer data, instead, it keeps the data in the component.
Props are accessible by child components.	The state can’t be accessed by child components
We can communicate and share data between components using props.	We can’t communicate and share data between components, hence it is used to render dynamic changes.
Props are available in stateless components.	The state isn’t available in the stateless component.
Component becomes reusable because of props.	Due to the state, components cannot be reusable.
Props are the external elements and are controlled by the render() method.	The State is internal and is itself controlled by the React Component.

There are some similarities between props and state:

State and Props

State and Props both are JavaScript objects, not react objects.

Both have default values, or you can set them as well.

Both can become read-only types if we use ‘this’ with them.

React State vs Props Use cases

When to Use Props

• If you want to display non-interactive or immutable data and components.
• When passing the data from one PC to another.

When to Use State

• If you want to make interactive data or components.
• If your data is changing in the component, then you don’t need to worry about that.
• when we need to update the front end if the state changes.
• Enable for user to modify the state.

Conclusion

We have learned about the props and state before now we have done differences between these two. The simple conclusion is that both props and states are important and life-changing concepts for ReactJS. Props are immutable and hold static data, so they can be used to transfer the data from one component to another. whereas states are mutable and can be accessible by a user which makes the state interactive. States are the basic concept for react hooks as well, so learning states give much more value to you.

Learn with video reference: