What is the difference between props and state?

Props flow down the tree. A child should treat them as immutable and ask the parent to change them through a callback. State is local to a component instance and is the component's memory across renders.

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

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

The differences

• Props are passed in; state is declared inside the component
• Props are read-only; state is updated with a setter
• A prop change re-renders the child; a state change re-renders the component that owns it
• State persists across renders until the component unmounts or the state changes

If two components need the same data, move it to their closest common parent and pass it down. That is lifting state up. If many distant components need it, context or an external store may be appropriate.