State vs Props Difference

🔀 State vs Props Difference in React

One of the most common questions React beginners face is: “What’s the difference between state and props?” They might seem similar at first, but they serve very different purposes in a React application.

In this post, we’ll break down what state and props are, how they work, and when to use each — with practical examples to clear your confusion once and for all.

📥 What Are Props?

Props (short for “properties”) are used to pass data from one component to another — typically from parent to child. They are read-only and can't be modified by the component receiving them.

const Welcome = ({ name }) => {
  return <h2>Hello, {name}!</h2>;
};

// Usage
<Welcome name="Aditya" />

In the example above, name is passed as a prop from the parent to the Welcome component. The component uses it to render dynamic content, but cannot change it internally.

📦 What Is State?

State is a built-in object used to store dynamic, local data inside a component. It can be updated by the component itself using the useState hook (in functional components).

import { useState } from 'react';

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

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

In this case, count is part of the component’s internal state. When you click the button, it updates and re-renders — something props can’t do alone.

📊 Key Differences Between State and Props

Feature	Props	State
Mutability	Immutable (read-only)	Mutable (can be changed)
Used For	Passing data from parent to child	Managing local, dynamic data inside a component
Where Defined	Parent component	Inside the component itself
Update Mechanism	Can’t update directly	Updated with useState or setState
Triggers Re-render?	Yes (if parent changes)	Yes (when state changes)

🔁 How They Work Together

It’s common to use both state and props together. For example, a parent may hold some state and pass it to child components as props.

const Parent = () => {
  const [theme, setTheme] = useState("dark");

  return <Child theme={theme} />;
};

const Child = ({ theme }) => (
  <p>Current theme: {theme}</p>
);

Here, the parent controls the state, but the child receives it as a prop.

📌 When to Use Props vs State

• 🟢 Use props when you want to pass read-only data from one component to another.
• 🔵 Use state when you want your component to respond to user actions or events (e.g., toggling a modal, updating a form).

🛡️ Best Practices

• ✅ Keep state local to the component that needs it
• 🔁 Lift state up to the closest common ancestor when multiple components need access to it
• 📦 Use props to make components reusable and composable
• 🧼 Don’t mutate props or state directly — always use setters

🧠 Recap: Props vs State

• Props: External data, passed down, unchangeable by the receiver
• State: Internal data, managed and updated within the component

Think of props as inputs and state as internal memory. Understanding the difference is crucial for writing clean, predictable, and efficient React applications.

🚀 What's Next?

• Learn how to lift state up when multiple components share data
• Explore controlled components in forms using state
• Understand how React re-renders based on state and props changes

Now that you’ve got a solid grasp on state vs props, you're better equipped to build powerful and interactive React UIs that scale. 💡

---