State vs Props in React: Key Differences and When to Use Each

State is data managed inside a component that can change over time, while props are read-only inputs passed from parent to child components. State controls component behavior internally, and props allow components to receive data and callbacks from outside.

Quick Comparison

Here is a quick side-by-side comparison of state and props in React:

Aspect	State	Props
Definition	Internal data managed by the component	External data passed to the component
Mutability	Mutable (can be changed with setState or hooks)	Immutable (read-only inside the component)
Purpose	To store and control component’s own data and UI changes	To pass data and event handlers from parent to child
Who controls it?	Component itself	Parent component
Usage	Used for data that changes over time or user interaction	Used for fixed data or callbacks from parent
Example	User input, toggle states	Labels, configuration, callback functions

Key Differences

State is a special object managed inside a React component that holds data that can change over time. When state changes, React automatically updates the component’s UI to reflect the new data. State is mutable and can only be changed using setState in class components or the useState hook in functional components.

Props are inputs passed from a parent component to a child component. They are read-only inside the child and cannot be changed by it. Props allow components to be reusable and configurable by passing different data or functions from outside.

In short, state is for data that the component owns and controls, while props are for data the component receives and uses but does not control. This separation helps keep React apps predictable and easy to debug.

Code Comparison

This example shows a counter component using state to track the count and update it on button click.

react

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Output

Count: 0 (initially) and increments by 1 each time the button is clicked

Props Equivalent

This example shows a counter display component receiving the count as a prop from its parent. The parent controls the count state.

react

import React, { useState } from 'react';

function CounterDisplay({ count }) {
  return <p>Count: {count}</p>;
}

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

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

export default CounterParent;

Output

Count: 0 (initially) and increments by 1 each time the button is clicked

When to Use Which

Choose state when: you need to store and update data inside a component that affects its rendering or behavior, like user input, toggles, or timers.

Choose props when: you want to pass data or functions from a parent component to a child component to configure it or handle events externally.

In general, keep state as close as possible to where it is needed, and use props to share data and callbacks between components.

Key Takeaways

State holds data that a component owns and can change internally.

Props are read-only inputs passed from parent to child components.

Use state for data that changes over time within a component.

Use props to pass data and callbacks from parent to child.

State changes trigger UI updates; props do not change inside the child.