React Strict Mode

公式ドキュメント

React 16.3 から存在する機能。

開発時に問題のあるコンポーネントに対して警告を出してくれる。

Development モードでのみ有効。Production モードでは自動的に無効化される。

StrictMode にする事で直接的な利益はあまりない。将来の React のアップデートで問題が起きにくい書き方が出来るようにするためのもの。(リンター的なもの)

code:jsx

import { StrictMode } from "react";

<StrictMode>

<MyComponent />

</StrictMode>

部分的に Strict にする事が可能

3rd party ライブラリなどで StrictMode にするのが厳しい場合は、その部分は Strict から外したりといった制御が可能

具体的にチェックしてくれる事

レガシーライフサイクルメソッドの検証

componentWillMount, componentWillUpdate, componentWillReceiveProps などの現在非推奨のライフサイクルを使っていると警告される

String タイプの ref

findDOMNode

findDOMNode API を使うと警告される。(個人的には使った事ナシ・・・)

古いContext API

古い Context API を使っていると警告される。(個人的に使った事ナシ・・・)

不正な副作用の検知

React 18 の Concurrent Rendering になると、特定のライフサイクルメソッドが今までと違う挙動をする場合がある (らしい)

code:jsx

function Component() {

const name = "John"

return <div>Hello {name}</div>

}

このコンポーネントの body 部分は React 17 までは初回レンダリング時に1回だけ呼ばれるが、React 18 からは、DOM 描画の負荷が高い場合に、2回以上呼ばれる可能性がある (らしい)。

なので、body 部分で副作用があるコードを動かしていたりすると、React 18 でバグってしまう可能性がある。

上のような、「普段は1回しか呼ばれないけど、React 18 から複数回呼ばれる可能性がある箇所」が StrictMode だとわざと2回ずつ呼ばれるようになる。(2回呼ばれる事で、副作用があるコードを書いていると副作用が多重化して気づきやすくなるという理屈のようです)

具体的には以下の関数/メソッドが毎回2回ずつ呼ばれるようになる

クラスコンポーネントの

constructor

render

shouldComponentUpdate

getDerivedStateFromProps

Function component bodies

State updater functions (the first argument to setState)

Functions passed to useState, useMemo, or useReducer