⚛️ React: State vs. Props 🔄

In React, data moves through components via Props and State. Confusing these two is the #1 cause of bugs in frontend apps.


🔹 1. What are Props? (The "Input")
Props is short for "properties." They are passed from parent to child (like arguments to a function). Props are read-only; a component cannot change its own props.

Example:

// Parent
<User name="Alice" />

// Child
function User(props) {
  return <h1>Hello, {props.name}</h1>;
}

🔹 2. What is State? (The "Memory")
State is internal to a component. It stores data that changes over time (like text in an input or a counter). When state changes, the component re-renders.

Example:

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

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

🔹 3. Key Differences
• Props: External, passed down, immutable (can't be changed).
• State: Internal, managed within, mutable (via updater function).

👉 Think of Props as the "Settings" and State as the "Current Status" of your component.

🎯 What you should do

✔️ Understand that data flows down (Props)
✔️ Use State for data that changes
✔️ Avoid trying to modify props directly