⚛️ Props & State Deep Dive

? Quick Overview

Props and State are the two core ways React components receive and manage data. Props are read-only inputs from the outside, while state is mutable data owned by the component itself.

• Props – configuration/data passed from parent to child.
• State – internal, changeable data that makes components interactive.
• Re-renders – components re-render when props or state change.

? Key Concepts

• Props are immutable inside the child component.
• State is updated using hooks like useState() or methods like setState().
• Data flow in React is top-down (unidirectional).
• Props and state often work together to build dynamic, reusable UI parts.

? Props — “Data from Outside”

Props (short for “properties”) are read-only values passed from a parent component to a child component. They make components reusable and configurable.

// A simple component that receives a name via props and renders a greeting
function Welcome(props) {
return <h2>Hello, {props.name}!</h2>;
}
// Reusing the same component with different prop values
// Usage
<Welcome name="Aman" />
<Welcome name="Riya" />

• ✅ Passed from parent to child.
• ✅ Immutable inside the child component.
• ✅ Ideal for configuration, labels, initial values, and display-only data.

?️ State — “Data from Inside”

State is local and mutable data owned by a component. When state changes, React automatically re-renders the component to reflect the new UI.

// State example: clicking the button updates local component state
import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h3>Count: {count}</h3>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

• ✅ Managed internally by the component.
• ✅ Mutable — updated using setState() or useState().
• ✅ Triggers a re-render whenever it changes.

? Props vs State Comparison

Props and state solve different problems. This table summarizes their differences:

? Combining Props and State

Props and state often work together. Props define external data (like a user’s name), while state tracks dynamic changes (like the number of likes).

// Combining props (name) with local state (likes) inside a single component
import { useState } from "react";

function Profile({ name }) {
const [likes, setLikes] = useState(0);
return (
<div>
<h3>{name}</h3>
<p>Likes: {likes}</p>
<button onClick={() => setLikes(likes + 1)}>Like</button>
</div>
);
}

The name prop is passed from outside, while likes is internal state that changes as the user interacts.

? Data Flow in React

• ➡️ Top-down (unidirectional): Data flows from parent to child through props.
• ⬅️ Callbacks: Children communicate back to parents using functions passed as props.

// Using a function prop so the child can send data back to the parent
function Parent() {
const handleMessage = (msg) => alert(msg);
return <Child sendMessage={handleMessage} />;
}

function Child({ sendMessage }) {
return (
<button onClick={() => sendMessage("Hello Parent!")}>
Send Message
</button>
);
}

Here, the Child component calls sendMessage, a function it received as a prop, to communicate back to the Parent component.

⚙️ When to Use Props vs State

• ✅ Use props when data should be provided from outside and not modified by the component.
• ✅ Use state when the component needs to track or modify data over time.
• ? Best practice: Keep state minimal and “lift state up” when multiple components need to share it.