StrictMode
StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツール
Fragment と同様に、StrictMode は目に見える UI を描画しない
StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになる
code: ExampleApplication.jsx
import React from "react";
// この例では ComponentOne と ComponentTwo の全ての子要素に StrictMode が働く
const ExampleApplication = () => {
return (
<div>
<Header/>
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer/>
</div>
);
}
StrictModeは以下のことに役立つ
安全でない LifeCycle の特定
将来リリースされる非同期レンダリングで、非推奨となるLifeCycleのこと
レガシーな文字列 ref API の使用に対する警告
非推奨な findDOMNode の使用に対する警告
意図しない副作用の検出
Reactには大きく分けてレンダーフェーズとコミットフェーズがある
レンダーフェーズでは、DOMなどの変更対象にどのような変更があったかを確かめる。これはrender()を実行して、前回renderされたComponentと比較することで確かめる
コミットフェーズでは、Reactは変更を反映する(React Dom の場合は、ここではDOMの追加・変更・削除を行う)。ReactはこのフェーズでcomponentDidMountやcomponentDidUpdateなどのLifeCycleを呼び出す
コミットフェーズは基本は高速だが、レンダリングフェーズでは低速なことが多いため、優先度の高い処理をレンダリングフェーズの間で行うようにするために非同期モードを今後追加予定である。
将来リリースされる非同期レンダリングでは、優先度の高い処理を優先的に実行するような仕組みになっているため、レンダーフェーズで実行される関数が複数回実行されることがある。
そうなった時に、副作用のあるような処理を行なっていると、メモリーリークやアプリケーションの無効な状態など多くの問題を起こしえる
レンダーフェーズのライフサイクルには次のクラス型コンポーネントのメソッドが含まれます。
constructor
componentWillMount
componentWillReceiveProps
componentWillUpdate
getDerivedStateFromProps
shouldComponentUpdate
render
setState 更新関数(第 1 引数)
Function Componentでは特に大きな問題はない?
レガシーな Context API の検出
今後色々追加される
StrictModeは手元で開発しているComponentでの検査にも役立つが、ライブラリーや外部のComponentを使用した時にも StrictMode を利用することでそのComponentが将来的に安全かどうかがわかる
StrictModeで引っかかった時に、issueなどを読んだりして改善されそうなら良いが、なんの動きもなければ使用をやめておくのが無難