One of the most frequently asked React interview questions is:

What is the difference between State and Props in React?

Most developers answer:

Props are passed from parent to child.
State belongs to the component.

While correct, interviewers often go deeper:

• Why do we need both?
• When should data be stored in state?
• Can props be modified?
• How do state updates trigger re-renders?
• What causes prop changes?
• How does React's one-way data flow work?

Let's understand these concepts from first principles.

Why Do We Need State and Props?

Imagine building a simple user profile.

<UserProfile />

Some data might come from a parent component:

<UserProfile name="John" role="Frontend Developer" />

Other data might change over time:

Likes
Theme
Form Inputs
Loading State

React separates these responsibilities using:

Props
+
State

1. What Are Props?#

Props (short for Properties) are inputs passed from a parent component to a child component.

Example:

function UserCard(props) {
  return <h2>{props.name}</h2>;
}

<UserCard name="John" />;

Output:

John

Props allow components to receive data from outside.

Visual Representation#

Parent Component
       │
       ▼
     Props
       │
       ▼
Child Component

Props always flow downward.

2. What Is State?#

State is data managed internally by a component.

Example:

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

  return <button>{count}</button>;
}

State can change over time.

Whenever state changes:

Component Re-renders

Visual Representation

Component
    │
    ▼
  State
    │
    ▼
 UI Updates

Unlike props, state belongs to the component itself.

Simple Example#

Props

function Welcome({ name }) {
  return <h1>Hello {name}</h1>;
}

Usage:

<Welcome name="John" />

Output:

Hello John

State

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

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

Output:

0 → 1 → 2 → 3

State changes dynamically.

Key Difference

Props#

External Data

Received from parent components.

State#

Internal Data

Managed by the component itself.

Props Are Read-Only

A very common interview topic.

Example:

function User({ name }) {
  name = "Sarah";

  return <h1>{name}</h1>;
}

This is incorrect.

Props should never be modified.

Think of props as:

Read Only

Why Are Props Immutable?

React follows:

One-Way Data Flow

Parents own data.

Children receive data.

Children should not modify parent-owned values.

One-Way Data Flow

App
 ↓
UserCard
 ↓
Avatar

Data moves:

Parent → Child

Never:

Child → Parent

directly.

How Do Children Update Parents?

Using callback props.

Example:

function Child({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

Parent:

<Child onIncrement={handleIncrement} />

The parent still owns the state.

State Triggers Re-Renders

Example:

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

  console.log("Rendered");

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

Every click:

State Update
      ↓
Re-render

Do Props Trigger Re-Renders?

Yes.

Example:

<UserCard name={user.name} />

If:

user.name;

changes:

Parent Re-renders
      ↓
New Props
      ↓
Child Re-renders

Interview Question

What causes a React component to re-render?

Common causes:

State Changes

Prop Changes

Context Changes

Parent Re-renders

State vs Props Example

Parent:

function App() {
  return <UserCard name="John" />;
}

Child:

function UserCard({ name }) {
  const [likes, setLikes] = useState(0);

  return (
    <>
      <h2>{name}</h2>

      <button onClick={() => setLikes(likes + 1)}>{likes}</button>
    </>
  );
}

Here:

name → Prop

likes → State

State Lifting

A common React architecture topic.

Suppose two components need the same data.

Bad:

<CounterA />
<CounterB />

Both manage their own state.

Better

Move state up.

<App>
  <CounterA />
  <CounterB />
</App>

App owns the state.

This is called:

Lifting State Up

Example

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

  return (
    <>
      <CounterA count={count} />

      <CounterB count={count} />
    </>
  );
}

State lives in the closest common parent.

Derived State From Props

Interviewers often ask:

Should state be copied from props?

Bad:

const [name, setName] = useState(props.name);

Potential issue:

Prop Changes
      ↓
State Does Not Update

This creates synchronization bugs.

Preferred Approach

Use props directly whenever possible.

<h1>{props.name}</h1>

Avoid duplicating data.

Controlled Components

Example:

const [value, setValue] = useState("");

<input value={value} onChange={(e) => setValue(e.target.value)} />

State becomes the source of truth.

Uncontrolled Components

Example:

<input ref={inputRef} />

The DOM manages the value.

React state does not.

Interview Question

Can Props Be State?

Yes.

A parent's state often becomes a child's props.

Example:

function App() {
  const [user] = useState("John");

  return <UserCard name={user} />;
}

Here:

State In Parent
      ↓
Prop In Child

React Rendering Flow

State Update
      ↓
Parent Re-renders
      ↓
Props Recomputed
      ↓
Children Re-render
      ↓
Virtual DOM Diff
      ↓
DOM Update

Understanding this flow is important for performance optimization.

Common Interview Questions

3. State vs. Props: The Core Differences#

Props are external inputs passed into a component.

State is internal data managed by the component.

4. Mutability Rules: Can Props or State Be Modified?#

No.

Props are read-only.

Can State Be Modified?#

Yes.

Using:

setState();

or:

useState();

updaters.

Which Causes Re-renders?#

Both:

State Changes
Prop Changes

can trigger re-renders.

5. Component Architecture: Lifting State Up#

Moving shared state into the nearest common parent component.

6. Data Architecture: One-Way Data Flow#

It makes applications:

• Predictable
• Easier to debug
• Easier to reason about

Senior-Level Interview Answer

Props and state are the two primary ways React components manage data. Props are immutable inputs passed from parent components and are used to configure a component's behavior or appearance. State is mutable data owned by a component and can change over time through state update functions. React follows a one-way data flow where state is typically managed in parent components and passed down as props. Changes to either state or props trigger React's rendering process, allowing the UI to stay synchronized with application data.

Common Interview Mistakes

❌ "Props and state are the same thing."

Correct:

Props are external inputs.

State is internal component data.

❌ "Props can be modified."

Correct:

Props are immutable.

❌ "State should always be local."

Correct:

Shared state should often
be lifted to a parent.

❌ "Copying props into state is best practice."

Correct:

Usually avoid duplicating data.

State vs Props Summary

Key Takeaways#

• Props vs. State: Props are immutable inputs passed down from parent components, while state is mutable local data managed internally within a component.
• Data Direction: React utilizes a strict one-way data flow where values flow downwards from parent to child.
• Immutability Rule: Props are read-only and must never be modified by the consuming child component.
• State Mutability: Local state is mutated exclusively through component state update functions (setState or useState updaters).
• Re-rendering Triggers: Changes to either state or props trigger React's render cycle to keep the UI in sync.
• State Lifting: When multiple components share data, lift the state up to their closest common parent component.