「コンポーネントとは数式のようなもの」という発想

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の関数コンポーネントは「同じ入力なら同じ出力を返す」純粋関数であるため、途中で計算をやめても、また最初からやり直せば同じ結果が得られる。

もしコンポーネントが「副作用」や「外部状態」に依存していた場合、途中で計算をやめたりやり直したりすると、結果が不安定になったりバグが起きたりする。

しかし純粋関数なら、何度やり直しても常に同じ結果になるので、安心して中断・再開ができる。

他にも色々とした利点があるみたい