When building modern React applications, two core concepts you will use every day are State and Props. These two terms may sound similar, but they serve very different purposes. Understanding the difference between them is essential for writing clean, reusable, and dynamic React components.

In this Hasenode blog, we’ll break down what State is, what Props are, and how they differ, with simple examples to make everything clear.

🔹 What Are Props?

Props (short for properties) are used to pass data from one component to another — typically from a parent component to a child component.

Key Features of Props

• Read-only (cannot be modified by the child component)

• Used for data flow from parent to child

• Make components reusable

• Behave like function parameters

✔ Example of Props

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

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

Here:

• App → Parent component

• Welcome → Child component

• name="Sagar" is passed as a prop

---

🔹 What Is State?

State is used to manage data that changes over time within a component. It is mutable, meaning a component can update its own state.

Key Features of State

• Mutable (can change over time)

• Used to handle dynamic data

• Updates cause the component to re-render

• Managed inside the component itself

✔ Example of State

import { useState } from "react";

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

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

Here:

• count is part of the component’s state

• setCount() updates the state

• UI updates automatically when the state changes

---

🆚 State vs. Props — Quick Comparison Table

---

🎯 When to Use What?

✔ Use State when:

• You need to store dynamic or interactive data

• A component needs to update its UI

Examples: Counter, form inputs, toggles, modals, cart items

---

✔ Use Props when:

• You want to pass data into a child component

• You need to make components reusable

Examples: Passing name, image, colors, lists, action handlers

---

🧠 Simple Rule to Remember

Props are for passing data.
State is for managing data.

Props = external
State = internal

---

🚀 Final Thoughts

Mastering State and Props is the foundation of becoming great at React.
Props help you share data across components.
State helps you change the UI dynamically.

When you understand how they work together, building interactive interfaces becomes effortless.