State and Props in React: What’s the Difference?

Date:

February 13, 2025

If you’re learning React, you’ve probably heard the terms “state” and “props.” But what do they mean, and how are they different? Let’s break it down.

Props: Short for “properties,” props are used to pass data from a parent component to a child component. They are read-only and cannot be modified by the child.
State: State is used to manage data that changes over time within a component. It’s mutable and can be updated using the setState method.

Here’s a quick example:

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}