State vs Props in React

In React, two concepts often confuse beginners: **state** and **props**. They both hold data that influences what gets rendered, but they have different purposes and characteristics. Let's understand the difference with a simple analogy.

The Coffee Shop Analogy

Imagine you walk into a coffee shop and order a latte.

Props are like your order: You tell the barista what you want ("latte"). This information comes from you (parent) to the barista (child). The barista cannot change your order – they just receive it and make the drink accordingly.
State is like the barista's notepad: The barista might write down that your drink is ready, or that you're waiting for your order. This information is internal to the barista and can change over time (when your drink is ready).

What are Props?

Props (short for "properties") are read-only inputs passed to a component. They are like arguments to a function. Props are passed from parent components to child components.

Immutable: A component cannot change its own props.
External: Data comes from outside the component.
Passed Down: Props flow from parent to child (one-way data flow).

<!-- Parent passing props to child -->
<Greeting name="Alice" age={25} />

<!-- Child receiving and using props – cannot change them -->
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

What is State?

State is data that a component manages internally. It can change over time, usually in response to user actions.

Mutable: A component can change its own state.
Internal: Data is private to the component.
Triggers Re-renders: When state changes, the component re-renders.

function Counter() {
  const [count, setCount] = useState(0); <!-- State -->
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Key Differences: State vs Props

Feature	Props	State
Mutability	Immutable (read-only)	Mutable (can change)
Ownership	Parent component	The component itself
Purpose	Configure/initialize child	Track changing data
Data Flow	Parent → Child	Component internal
Initial Value	From parent	Set by component

When to Use What?

Use Props when:

You need to pass data from a parent to a child component.
You want to configure how a child component should behave or look.
The data won't change within the child component.

Use State when:

Data changes over time (user input, toggles, counters).
The data is internal to the component and not needed by parents.
You need to trigger a re-render when data changes.

Example Combining Both

function WelcomeUser({ initialName }) { <!-- Props -->
  const [name, setName] = useState(initialName); <!-- State initialized with prop -->
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      {isEditing ? (
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      ) : (
        <h1>Welcome, {name}!</h1>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? 'Save' : 'Edit'}
      </button>
    </div>
  );
}

Two Minute Drill

Props are read-only data passed from parent to child (like function arguments).

State is mutable data managed internally by a component (like local variables that trigger re-renders).

Props flow down (parent → child), state is internal to a component.

Components cannot change their own props, but they can change their own state.

State changes trigger re-renders, prop changes from parent also trigger re-renders.

Use props for configuration, use state for interaction and changing data.

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

State vs Props in React

Need more clarification?