React: Difference between state and props?

Props and State are two ways of managing data in React, but with different "rules of the game".

Simple analogy: Imagine you are a chef (component).

• Props — this is an order from a waiter (parent component): "Make pasta with cheese." You CANNOT change the order. You just cook what you were told.
• State — these are your own notes: "How much pasta is left? 3 servings. What temperature to set? 180°." You can change these notes yourself. When you change them — you cook a new dish (component re-renders).

Another analogy: Think of props as the weather — it comes from outside (parent), and you cannot control it. State is like your thermostat — you set it yourself based on your needs, and when you change it, the house adjusts (re-render).

Details:

Props (properties):

• Come from the parent (like function arguments).
• Immutable — the component CANNOT change them.
• When props change (parent passed new ones), the component re-renders.
• Used for: configuring a component, passing data from parent to child.

1<UserCard name="Alice" age={25} />  // props: name and age
2// Inside UserCard these props cannot be changed!

State:

• Lives inside the component.
• Mutable via setState (in classes) or via useState (in functions).
• When state changes, the component re-renders.
• Used for: data that changes during operation (counter, text in input, task list).

1const [count, setCount] = useState(0);  // state
2setCount(count + 1);  // Changing state → component re-renders

How data flows in React:

1function Parent() {
2  const [userName, setUserName] = useState("Alice");
3  return (
4    <div>
5      <h1>Welcome, {userName}</h1>       {/* Reading state */}
6      <Child name={userName} />          {/* Passing state as props */}
7      <input onChange={e => setUserName(e.target.value)} />
8    </div>
9  );
10}
11
12function Child({ name }) {
13  return <p>Child sees: {name}</p>;    {/* Reading props */}
14}

Why it matters:

• Unidirectional data flow — props flow down, state flows up (via callbacks). This makes data flow predictable and easy to debug.
• Component isolation — each component manages its own state, making components reusable and testable.
• Debugging — when something is wrong, you know to look up for props changes or inside for state changes.

Common mistakes:

• Trying to modify props directly: props.name = "Bob" — this will throw an error.
• Mutating state directly: count++ instead of setCount(count + 1) — this won't trigger a re-render.
• Passing callback functions as props for child-to-parent communication but forgetting to bind them, causing infinite loops.
• Confusing derived state (computing values from props) with actual state — if a value can be computed from props or other state, it should not be state.

When to lift state up: If two sibling components need the same data, lift the state to their closest common parent and pass it down via props.

Key difference: Props come from above and CANNOT be changed. State lives inside and CAN be changed (through special functions). Changing state triggers re-rendering. Props changes also trigger re-rendering of the receiving component.