Reactで「クラスコンポーネントより、関数コンポーネントが一般的になったのは何故だろう」と思った。
これについて、調べていく。
「コンポーネントとは数式のようなもの」という発想
Reactの公式ページによると、コンポーネントを純関数として考えている。
あなたが書くすべてのコンポーネントが純関数であると仮定しています。
つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
確かに、定義したUIコンポーネントが毎回同じ見た目で表示されるべきであると思う。
Reactの公式ページより、以下の例が共有されている。
<Cup />に、Propsを渡していないのに、見た目が変わってしまうのは大事故である。
React
let guest = 0;
function Cup() {
// Bad: changing a preexisting variable!
guest = guest + 1;
return <h2>Tea cup for guest #{guest}</h2>;
}
export default function TeaSet() {
return (
<>
<Cup />
<Cup />
<Cup />
</>
);
}
React はなぜ純粋性を重視するのか？
三つの利点を提唱している。
1. コンポーネントが異なる環境、例えばサーバ上でも実行できるようになる
近年では、Next.jsやReact Server Componentが登場し、サーバーサイドでもコンポーネントを実行することが一般的になってきた。
こういったことも、関数コンポーネントの持つ純粋性あってのことだろう。
2. 入力値が変化しない場合、レンダーをスキップすることでパフォーマンスを向上できる
これが問題ないのは、純関数は常に同じ出力を返すため安全にキャッシュできるから
3. 深いコンポーネントツリーのレンダーの途中でデータが変化した場合、React は既に古くなったレンダー処理を最後まで終わらせるような無駄を省き、新しいレンダーを開始できる
Reactの関数コンポーネントは「同じ入力なら同じ出力を返す」純粋関数であるため、途中で計算をやめても、また最初からやり直せば同じ結果が得られる。
もしコンポーネントが「副作用」や「外部状態」に依存していた場合、途中で計算をやめたりやり直したりすると、結果が不安定になったりバグが起きたりする。
しかし純粋関数なら、何度やり直しても常に同じ結果になるので、安心して中断・再開ができる。
他にも色々とした利点があるみたい