Open In App

ReactJS State vs Props

Improve
Improve
Like Article
Like
Save
Share
Report

In React props are a way to pass the data or properties from one component to other components while the state is the real-time data available to use within that only component.

States and props are two of the most important concepts of React and everything in React is based upon them. But before jumping into State and Props we need to know about the relation between components and normal functions.

Relation between Components and normal functions in JavaScript

We know that react components are the building blocks that can be reused again and again in building the UI. Before jumping into the main difference between the state and props, let’s see how a component in react is related to a normal function in javascript.

Example: 

javascript




// simple component
class FakeComponent extends React.component {
    render() {
        return <div>Hello World!</div>
    }
}
// simple javascript function
const FakeFunction = () => console.log('Hello World!');


In the above code, we declared a simple react component by extending the React.component native method and then we simply render a div that contains ‘Hello World’ inside it as text. After the function we have a simple javascript function inside it which contains a simple console.log that does the same thing inside it, printing ‘Hello World!’. 

So now we know that a React component works similarly to a normal JavaScript function. Let’s take a look at the state 

State in React:

A state is a variable that exists inside a component, that cannot be accessed and modified outside the component, and can only be used inside the component. Works very similarly to a variable that is declared inside a function that cannot be accessed outside the scope of the function in normal javascript. State Can be modified using this.setState. The state can be asynchronous. Whenever this.setState is used to change the state class is rerender itself. Let’s see with the help of an example: 

Props in React:

React allows us to pass information to a Component using something called props (which stands for properties). Props are objects which can be used inside a component. Sometimes we need to change the content inside a component. Props come to play in these cases, as they are passed into the component and the user..

Difference between props and state:

PROPS

STATE

The Data is passed from one component to another. The Data is passed within the component only.
It is Immutable (cannot be modified). It is Mutable ( can be modified).
Props can be used with state and functional components. The state can be used only with the state components/class component (Before 16.0).
Props are read-only. The state is both read and write.

In conclusion, the main significant difference between states and props is that props are used to transfer data from a parent component to a child whereas states are used to manage the data inside a component itself.

Let us see an the example where we can properly understand the difference between state props

Create a React application with the command

npx create-react-app statevsprop 

and write the below code in index.js file of your application

Example: 

Javascript




// Filename - index.js
 
import React, { Component } from "react"
import ReactDOM from 'react-dom';
import './index.css';
 
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>
    )
}
  
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>
  
        )
    }
}
  
 
function App() {
  
    const fruits =
    {
        name: "Mango",
        color: "Yellow"
    }
  
    return (
        <div className="App">
            <Fruit fruits={fruits} />
            <hr></hr>
            <Car />
        </div>
    );
}
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


Output: In the fruit component props are used where data is passed by the parent component(App) to child(Fruit) whereas the car component manages data internally using state

Note: To know about the difference you can check this What are the differences between props and state.



Last Updated : 28 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads