React 101: Difference Between State and Props

If you're learning React—or even using it in real projects—you’ve probably come across both state and props.

But it’s common to get confused about what each one really does.

In this post, I’ll explain the key differences in a simple way, and show you when to use each of them. 🚀

🎯 1. Props

• props stands for properties
• Used to pass data from a parent component to a child component
• Immutable (read-only) inside the child component

✅ Example:

function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}

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

⚠️ Important:

You can’t pass data directly between sibling components (components on the same level).

📌 In that case, you need to lift the state up to the closest parent component, and use it as a bridge between the two siblings.
💬 So how do siblings share data?

Depending on your project size or complexity, you can:

• Lift the state up to the common parent
• Use React Context API
• In larger apps, consider using a state management library like Redux or Zustand

🔄 2. State

• state refers to data that belongs to the component itself
• It can change over time, and every change triggers a re-render
• Great for things like tracking user input, toggling UI elements, updating counters, etc.

✅ Example:

import { useState } from 'react';

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

  return (
    
      Counter: {count}
       setCount(count + 1)}>Increase
    
  );
}

🧾 Summary Table

If you found this helpful, feel free to like, share, or save it for later.
And if you have any questions—drop them in the comments! 🙌 Let’s learn together.