📌 Understanding State vs Props in React

When working with React, two terms you’ll encounter frequently are state and props. While both help manage data and control UI behavior, they serve very different roles. Understanding this difference is critical for writing clean, scalable React components.

📌 Quick Overview: State vs Props

Props: Read-only data passed from a parent component to a child component
State: Internal, mutable data managed by the component itself
Props are controlled by the parent; state is controlled locally
Props improve reusability; state manages dynamic behavior

⚖️ Key Differences Between State and Props (With Code)

Props Example (Parent → Child Data Flow)

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

function App() {
  return <Greeting name="Rahul" />;
}

Here, name is a prop. The Greeting component cannot change it—it only receives and displays it.

State Example (Internal Component Data)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

Here, count is state. The component owns it and updates it using setCount.

🧠 Core Concept Comparison Using Code

❌ Props Cannot Be Modified

function Child({ value }) {
  // ❌ This is NOT allowed
  value = value + 1;
  return <p>{value}</p>;
}

Props are read-only. Modifying them directly will break React’s data flow.

✅ State Can Be Updated Safely

function Example() {
  const [value, setValue] = useState(1);

  return (
    <>
      <p>{value}</p>
      <button onClick={() => setValue(value + 1)}>Update</button>
    </>
  );
}

State updates trigger a re-render, keeping the UI in sync.

🛠 Real-World Analogy (With Mapping)

Think of a YouTube video player:

Props → video title, channel name (provided from outside)
State → play/pause status, current time, volume

Props configure the component; state controls how it behaves.

💡 When to Use Props vs State (Practical Scenarios)

Use Props When:

function Button({ label }) {
  return <button>{label}</button>;
}

Used for configuration, labels, themes, or static data from parents.

Use State When:

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

Used for user interaction and UI changes.

🔁 Combining Props and State (Very Common Pattern)

function Child({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

function App() {
  return <Child initialCount={5} />;
}

Props provide the initial value, state manages ongoing changes.

🧰 Pro Tips for Developers

Use props for data coming from outside the component
Use state for data that changes over time
Never mutate props directly
Lift state up if multiple components need the same data

📚 Conclusion

Props and state may look similar, but they solve different problems. Props define what a component receives, while state defines how a component behaves. Once this distinction is clear, React’s component model becomes much easier to understand, debug, and scale.

State vs Props in React: Key Differences