Reactの再レンダリングの仕組み（stateとpropsの関係）

結論

結論としては、実際のトリガーはstate更新であることが多いが、
コンポーネントの視点によってはpropsの変化も再レンダリングのきっかけになる。

親コンポーネント

import { useState } from "react"

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <Child count={count} />
    </div>
  )
}

default export Parent

子コンポーネント

function Child({ count }) {
  return <p>{count}</p>
}

default export Child

何が起きてるか

1. ボタンを押す
2. setCountが呼ばれる（state更新）
3. Parentが再レンダリングされる
4. Childに新しいcountがpropsとして渡る
5. Childが再レンダリングされる

まとめ

再レンダリングのきっかけはsetCountによるstate更新だが、
Childから見るとpropsが変わったことで再レンダリングされている。

Reactの再レンダリングは
state更新 → 親の再レンダリング → propsの変化 → 子の再レンダリング
という流れで伝播していく。

補足

state更新 → 親の再レンダリング → propsの変化 → 子の再レンダリング
という流れになっている。