What is the difference between props and state in React?

Both hold data that affects what a component renders, but they come from different places and are controlled differently.

Props (properties)

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

<Greeting name="Alex" />

Props are passed down from a parent component, similar to function arguments. A component treats its own props as read-only — it should never modify them directly.

State

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

<button onClick={'{'}() => setCount(count + 1){'}'}>
  Clicked {'{'}count{'}'} times
</button>

State is local data a component owns and can update itself, typically using the useState hook in modern React. Calling the state-setter function (like setCount) triggers React to re-render the component with the new value.

A simple way to remember it

Props flow down from parent to child, like configuration handed to the component. State lives inside the component and changes over time in response to user interaction or other events.