What is the difference between state and props in React?

In React, state and props are both used to manage data, but they serve different purposes.

Props

Props (properties) are used to pass data from a parent component to a child component.

Read-only (cannot be modified by the child)
Used to make components reusable
Passed as function arguments

Example:

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

// Usage
<Welcome name="Sam" />

State

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

Managed inside the component
Can be updated using setState or useState
Causes re-render when updated

Example:

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

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

Props

State

Click to Reveal Answer

Companies

Topics