Lesson 6 - States

6.3 - Difference Between Props And State

At this time, you might feel confused between Props and State. We already discussed Props in lesson 4 and demonstrated States recently.

In this chapter, we'll briefly differentiate Props and States, making the difference crystal clear with examples.

Props Props are mainly used to pass data from the parent component to the child component. They carry vital information that the child components need to render and function correctly, mostly used for component-to-component data sharing.

Think about a traditional website designed with raw HTML, CSS, and JavaScript, containing two Popups to show a successful and failed message to the user. In this case, you need to code two Popups separately and define a separate handler function to launch them based on condition.

With React's Props feature, you can do the same thing in a few lines of code! How? You just need to design the Popup as a React component once and make it available to receive data via Props.

That's it. You can now reuse the Popup component, showing different messages easily using Props without writing redundant code.

There is one thing to remember about Props, the child components can't change the Props data.

import React, { useState } from 'react';

const Header = (props) => {
 return (
 <h1>{props.heading}</h1>
 )
}

const HeaderWithSubHeader = (props) => {
 return (
 <>
 <Header  heading="I'm Main Header"/>
 <h2>I'm Sub Header</h2>
 </>
 )
}
const App = () => {
 return (
 <>
 <Header heading="This is a Props"/>
 <HeaderWithSubHeader />
 </>
 );
};

Observe the Header and HeaderWithSubHeader components, both of which are utilized by the main App component.

The fascinating aspect of this example is that HeaderWithSubHeader also incorporates the Header component with different content.

This demonstrates that the Header component can be reused by any other component linked to it, showcasing React's powerful composability and reusability.

State The state represents the mutable, dynamic data within a component. It's the living essence that changes over time, driving reactivity and interactivity in your application.

Unlike props, the state can be updated. When the state changes, the component re-renders to reflect the new state.

The state is like a local variable for a Component. It's perfect for handling data that evolves, such as user input, form data, or interactive elements that change over time.

import React, { useEffect, useState } from 'react';

const App = () => {
 const [stat, setStat] = useState(true)
 const [ userStat, setUserStat] = useState("")

 useEffect(() => {
 if(stat){
 setUserStat("Logged In")
 }
 else
 setUserStat("Logged Out")
 },[stat]);

 return (
 <>
 <h1>Current Status: {userStat}</h1>
 <button onClick={() => setStat(!stat)}>Update Status</button>
 </>
 );
};

We defined two states: stat and userState. When you click on Update Status, the setStat() function toggles the value of stat.

The useEffect hook detects changes in the stat state, updates userState, and triggers a component re-render to reflect the changes.

In this example, both stat and userState are managed internally by the component.

The following table provides a quick overview of the difference between the Props and State.

	Props	State
Definition	Props are read-only attributes passed from a parent component to a child component	State is a local, mutable data store managed within a component.
Usage	Props are used to pass data and event handlers to child components, making them configurable.	State is used to keep track of changing data that affects the rendering of the component.
Immutability	Props cannot be changed by the child component.	State can be updated using the setState function (or similar, depending on the hook).