What is the difference between state and props?

• Props — passed in from outside, owned by the parent, read-only inside the component
• State — owned and managed by the component itself, mutable via setState/useState, triggers re-render when changed

function Counter({ initialCount, step = 1 }) {
  //              ↑ props — given from parent, read-only here

  const [count, setCount] = useState(initialCount);
  //     ↑ state — owned by this component

  return (
     setCount(c => c + step)}>
      Count: {count}
    
  );
}

When state changes: React re-renders the component and all its children.

When props change: the parent re-renders, passing new props, which causes the child to re-render.