React18におけるStrictモードについて調べました

これは何

React18社内勉強会の発表資料です。

Strictモードとは

Strict モードは、コード内の意図しない副作用の検出だったり、潜在的な問題を実際のバグになる前に発見するのに便利な開発モードのみで実行される開発ツールです。
潜在的な問題とは、現時点では目に見えないものの、将来的には問題を生じる可能性のある事を指します。

React18でのStrictモード

以下DeepLを使用した公式の翻訳です。

• コンポーネントは、不純なレンダリングに起因するバグを見つけるために、余分な時間を再レンダリングします。
• コンポーネントは、Effectのクリーンアップの欠落に起因するバグを見つけるために、Effectを余分に再実行します。
• あなたのコンポーネントは、非推奨のAPIを使用していないかチェックされます。

つまり、表示→表示したのを破棄→再表示という順番で実行されます。
なぜこのような動きをするのかというと、冒頭に書いたような「副作用」があるコードをあぶり出すことができるようになります。

副作用がある簡単なサンプルコード

以下はReact公式から引用してきたコードです

index.jsx

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 />
    </>
  );

// 想定した実行結果
Tea cup for guest #1
Tea cup for guest #2
Tea cup for guest #3

本来であれば上のような結果を想定していましたが、実際の実行結果は以下になります。

// 実際の実行結果
Tea cup for guest #2
Tea cup for guest #4
Tea cup for guest #6

Strictモードによって２回実行し、2、4、6と表示され副作用があることが発見されました。

公式でも副作用があるコードに対して以下の様に書かれています。

数式 y = 2x の例に戻ると、これは x = 2 であっても y = 4 であることが保証されない、というようなことです。テストは失敗し、ユーザは当惑し、飛行機も空から墜落しかねません。

これはReactのコンポーネントを純粋に保つという思想から反している、つまり冪等ではないという事らしいです。

さらに今回のStriceモードではuseEffectの第２引数を[]にしても２回処理が走るようになりました。
これはuseEffectにクリーンアップ関数が書かれてない事によるバグを防ぐためでもあります。

上のコードはReactの公式からforkしてきたコードですが、コンソールで確認しても「クリーンアップ関数込み」でActive connection数が1以上は増えないこと分かります。

その他

Strictモードのその他の機能としては非推奨になったAPIなどを使用した場合、警告が表示されるそうです。
公式に書いてある非推奨になったAPIは主にClassコンポーネントで使われていたAPIなので、これからReactを勉強する方にとっては、あまり必要な知識ではなさそうです。

まとめ

今回は社内勉強会の発表資料として、色々な記事をまとめて自分なりに咀嚼してみましたが、関数の知識や「冪等性（べきとうせい）」など知らない言葉などが次々出てきて、一つの機能を少し掘り下げるだけで様々なことが網羅できたような気がしてます。

その他の参考資料