React State vs Props – Difference Between State And Props

In earlier parts, we have learned about state and props. Now we will see difference of React State vs Props one by one, both are actually important topics to learn, so it is also important to understand difference 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?, what are the difference between them? So yes, this article will answer all of these questions, and we will understand about their use cases and why these two concepts are too much 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 into 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 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 have some values, and we will use in 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.	State is mutable.
With help of props, we can transfer data from one component to other component.	State won’t allow you to transfer data, instead it keeps the data in the component.
Props are accessible by child components.	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 used to render dynamic changes.
Props are available in stateless components.	State aren’t available in stateless component.
Component becomes reusable because of props.	Due to state, components cannot be reusable.
Props are the external elements, and controlled by render() method.	The State is internal and is itself controlled by the React Component.

There are some similarity between props and state:

State and Props

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

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

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

React State vs Props Use cases

When to Use Props

• If you want to display non-interective 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 component.
• If your data is changing in the component, then you don’t need to worry about that.
• when we need to update front end if 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 state are important and life changing concepts for ReactJS. Props are immutable and holds static data, so it can be used to transfer the data from one component to another. whereas states are mutable and can be accessible by user which makes state interactive. States are the basic concept for react hooks as well, so learning state give much more value to you.

Learn with video reference: