React公式の学習

• Reactはエンジニアが書いたコードが全て純粋関数であると仮定している。つまり、Reactコンポーネントは与えられた入力が同じであれば、常に同じJSXを返す必要がある。

• 返すJSXがpropsの値に依存しているのが好ましい

• 特定の順序でコンポーネントがレンダーされることをエンジニアは期待してはいけない。コンポーネントは自分のことだけを考えるべきだから。(そういうReactの思想)

• 要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。*1

Bad

let guest = 0

function Seat() {
  guest = guest + 1
  return <h2>Seat Id for guest #{guest}</h2>
}

export default function MovieSeats() {
  return (
    <>
      {/* Strict Modeによってコンポーネントが2回呼ばれたため、1,2,3の表示にならない */}
      {/* UI表示: Seat for guest 2 */}
      <Seat />
      {/* UI表示: Seat for guest 4 */}
      <Seat />
      {/* UI表示: Seat for guest 6 */}
      <Seat />
    </>
  )
}

Good

function Seat({ guest }) {
  return <h2>Seat Id for guest #{guest}</h2>
}

export default function MovieSeats() {
  return (
    <>
      {/* UI表示: Seat for guest 1 */}
      <Seat guest={1} />
      {/* UI表示: Seat for guest 2 */}
      <Seat guest={2} />
      {/* UI表示: Seat for guest 3 */}
      <Seat guest={3} />
    </>
  )
}

参照

コンポーネントを純粋に保つ StrictMode で純粋でない計算を検出 詳細を隠す