Difference Between State and Props in React

This is one of the most common React interview questions.

Quick Definition

Feature	Props	State
Meaning	Data passed from parent to child component	Data managed inside the component
Mutability	Read-only (immutable)	Mutable
Controlled By	Parent component	Component itself
Purpose	Configure component behavior	Manage dynamic data/UI
Can Child Modify?	No	Yes (using setter function)
Re-render Trigger	When parent passes new props	When state changes
Example	<User name="Sam" />	const [count, setCount] = useState(0)

1. What are Props in React?

Props stands for Properties.

They are used to pass data from one component to another, usually from parent → child.

Think of props like function parameters.

Example of Props

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

export default function App() {
  return <Welcome name="Sampath" />;
}

Explanation

• name="Sampath" is a prop

• Parent component passes data

• Child component receives it

• Child should not modify props

2. What is State in React?

State is data that belongs to a component and can change over time.

State is used for:

• User interactions

• Dynamic UI updates

• Form handling

• API responses

• Toggle behavior

Example of State

import { useState } from 'react';

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

  return (
    <>
      <p>Count: {count}</p>

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

Explanation

• count is state

• setCount() updates state

• UI re-renders automatically after state update

Real-World Analogy

Imagine a mobile phone:

Concept	Example
Props	Phone settings given by manufacturer
State	Current battery percentage, WiFi status

Props come from outside.
State changes internally.

Important Interview Point

Props are Immutable

You should never directly modify props.

❌ Wrong

props.name = "John";

✅ Correct

Pass new props from parent component.

Important Interview Point

State Updates are Asynchronous

React may batch multiple state updates for performance.

setCount(count + 1);

The updated value may not be available immediately after calling setter.

Parent-Child Flow

Parent Component
       |
       |  props
       v
Child Component

State usually lives in the component that owns the data.

Example Using Both State and Props

function Child(props) {
  return <h1>{props.message}</h1>;
}

export default function Parent() {
  const [text, setText] = useState("Hello");

  return (
    <>
      <Child message={text} />

      <button onClick={() => setText("Welcome")}>
        Change Text
      </button>
    </>
  );
}

Here

• text → state

• message → prop

• Parent state is passed to child as props

Interview-Friendly One-Line Answer

Props are read-only data passed from parent to child components, whereas state is mutable data managed within a component that controls dynamic behavior and UI updates.

Frequently Asked Interview Follow-Ups

Q1: Can a child component change props?

No. Props are read-only.

Q2: When does a component re-render?

A component re-renders when:

• State changes

• Props change

• Parent re-renders

Q3: Which is better: props or state?

Neither is “better”.

• Use props for external data communication

• Use state for internal dynamic behavior

Functional Component vs Class Component

Functional Component State

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

Class Component State

this.state = {
  value: ""
};

Common Beginner Mistake

❌ Copying props into state unnecessarily

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

Usually avoid this unless specifically needed.

Best Practice

• Keep state minimal

• Lift state up when multiple components need same data

• Use props for communication

• Avoid deeply nested prop drilling when possible

Interview Summary

Props

• Passed from parent to child

• Immutable

• Used for communication

State

• Managed inside component

• Mutable

• Used for dynamic UI

Short Interview Answer

Props are read-only inputs passed from parent to child components, while state is internal data managed by the component itself. Props help components communicate, whereas state is used to manage dynamic and interactive UI behavior. Updating state causes React to re-render the component.