どちらも component が何を render するかに影響する data を保持しますが、誰が data を所有するか、そして変更できるかが異なります。
- props は parent から component に渡されるものです。read-only であり、component は絶対に変更してはいけません。
- state は component の内部で所有・管理されます。時間とともに変化でき、変更すると re-render が発生します。
// `step` は PROP — parent から渡され、child は読むだけ。
// `count` は STATE — ここで所有され、click で変化し、re-render を起こす。
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent が step を決めて渡す:
<Counter step={5} />
Data は down に流れます（parent → child via props）。変更は up に流れます（child が onChange のような callback prop を通じて parent に変更を依頼する）。この一方向の流れが React app を予測しやすくします。
props.x = 1）のは bug です。React は re-render せず、parent の ownership も壊します。「prop を変更」したい場合は、parent から渡された callback を呼び、parent が自分の state を更新して新しい値を下に渡すようにします。