State VS props

ReactMiddle~1 min read

1. What is props

Props (properties) are input data for a component. They are passed from the outside, usually from a parent to a child component.

Key characteristics:

Passed into the component (for example, via JSX).
Immutable inside the component itself (read-only).
Used to configure the component from the outside.
If the parent passes new props, the component re-renders.

Example:

javascript

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Usage
<Greeting name="Alex" />

Here name is props passed to the Greeting component.

2. What is state

State is a component's internal data that can change over time (for example, on a click, input, or request).

Key characteristics:

Belongs to the component (local data).
Can be changed (via useState or setState).
Changing state triggers a re-render of the component.
Used to store the dynamic state of the UI.

Example:

javascript

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

Here count is state belonging to the Counter component itself.

Main difference:

Characteristic	Props	State
Where is it stored?	In the parent	Inside the component
Can it be changed internally?	No	Yes
Does changing it trigger a re-render?	Yes, if new ones arrive	Yes, if setState is called
Who controls it?	The parent	The component itself
Purpose	Configuring the component	Dynamic behavior

Analogy

Think of a component as a function with memory:

props are the function's input arguments.
state consists of local variables that persist between calls.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.