Props は親コンポーネントから子コンポーネントに渡される入力値です（子から見ると読み取り専用）。State はコンポーネントが所有および内部で管理するデータです（変更できます）。区別：props は外部から来て、コンポーネント内では変わりません。state は内部的で変更可能です。
Props — 渡される、読み取り専用
jsx
() {
;
}
< name= />
Props は親から子へ下方に流れます。子はそれを読み取りますが、変更することはできません。prop の値を変更するには、親が新しい値を渡す必要があります。
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State はコンポーネント内部で作成および制御されます。コンポーネントはそれを変更し（setCount/setState 経由）、変更するとリレンダリングがトリガーされます。
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
あるコンポーネントのstateは、子コンポーネントにpropとして渡されることがよくあります。state を上げて下ろすことは、まさにこのパターンです。親が state を所有し、子は prop として受け取ります。
state vs props の区別はコンポーネントベースのフレームワークの基本です。
データの所有権とフローを定義します。props は外部的な読み取り専用の設定（データが下方に流れる）です。state はコンポーネントが管理する内部的で変更可能なデータです。
これらを混同する — props を変更する、または props を state に複製する — は典型的なバグの原因です。
データが prop として下方に流れ、各コンポーネントが自身の state を所有することを理解することは、React/Vue/Angular コンポーネント設計の基礎です。