React:純関数とは

純関数

純関数とは『計算だけを行い、他には何もしない関数のこと』で次の特徴がある。

  • 呼び出される前に存在していたオブジェクトや変数を変更しない
  • 同じ入力を与えると、純関数は常に同じ結果を返す

純関数は数学で言うところの f(x) = x と同じで入力が同じであれば常に同じ出力となるものと言える。

コンポーネントを常に厳密に純関数として書くことで、コードが大きくなるにつれて起きがちな、あらゆる種類の不可解なバグ、予測不可能な挙動を回避することができるようになるらしい。

React はコンポーネントが純関数であると仮定しているため、入力が同じであれば常に同じ JSX を返す必要がある。

なぜ純関数が重要なのか?

  • 入力値が同じなら同じ結果を返すので、一つのコンポーネントが多数のユーザリクエストを処理できる
  • 入力値が変化しない場合、レンダーをスキップできるためパフォーマンスを向上できる
  • 深いコンポーネントツリーのレンダーと途中に入力値の変化を検知したら、そのタイミングで新しいレンダーを始めることができる

レンダー更新とコンポーネントを使う側へのメリットが多いと理解🤔

当該コンポーネントを利用する側のメリットとしては、入力値のみを気にしておけば、使用する際に変な影響を受けないということなのかと思った。

参考