React Props vs State: The Dynamic Duo Explained

If you’ve ever built a React app and wondered, “Should this go in props or state?”, you’re not alone. Props and state are like the Batman and Robin of React — different roles, but unstoppable when used together. 🦸‍♂️

Let’s break down what they are, how they differ, and how to use them without accidentally sending your app into chaos.

🎁 What Are Props?

Props (short for properties) are read-only inputs you pass from a parent component to a child component. Think of them like gifts 🎁 — you can give them to your children, but once given, they can’t change them (no take-backs!).

Example:

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

function App() {
  return <Welcome name="Aryan" />;
}

Here, App passes a name prop to Welcome. The child receives it and uses it. Simple, predictable, and beautifully unidirectional.

Props make components reusable. You can render or without rewriting the component.

🧠 What Is State?

While props come from the outside, state lives inside the component. State is data that can change over time — like a mood swing or your Wi-Fi connection during a storm. 🌩️

Example:

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

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </>
  );
}

Here, count is a state variable, and setCount updates it. When state changes, React automatically re-renders the component.

🔄 The Core Difference

Props are external inputs.
State is internal memory.

You can think of props as a function’s arguments and state as variables inside the function.

🧩 How Props and State Work Together

Imagine you’re building a todo app:

The parent holds the list of todos in its state.

The child receives each todo item as a prop and displays it.

When the user adds a new todo, the parent updates its state — React re-renders the list, and children receive updated props automatically.

This is what makes React reactive. ⚡

🚫 Common Mistakes to Avoid

Trying to modify props:

props.name = "John"; // ❌ Never do this!

Props are immutable. If you need to change data, manage it via state or pass a callback from the parent.

Overusing state:
Don’t put everything in state. Derived or temporary values can often be computed on the fly.

Prop drilling:
Passing props through multiple layers becomes messy. Use Context API or Redux to avoid that headache.

💡 Pro Tip: Lift State Up

When two components need to share data, move the state to their closest common ancestor and pass it down as props. This pattern — known as lifting state up — keeps your app’s data flow clean and predictable.

🎯 Conclusion

Props and state might seem similar at first, but they serve completely different purposes:

Props make components configurable and reusable.

State makes components dynamic and interactive.

Mastering when and where to use each is a huge step toward writing clean, maintainable React code.

So next time you’re unsure, remember:

Props tell your component what to do.
State lets your component do it.

Use them wisely — and your React app will run smoother than butter on a hot pancake. 🥞✨