Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
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 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;
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;
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. |
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: