React での厳密モードの目的

1. React の厳密モード
2. React Strict モードの利点
3. React Strict モードの最適な使用法

JavaScript は、フルスタックアプリケーションを開発するための優れたプログラミング言語です。初心者の開発者は、クリーンで整理された JavaScript コードを書くのに苦労することがよくあります。幸いなことに、Web アプリケーションを作成するための構造を提供する JavaScript フレームワークがあります。そして、React は、効率的な Web アプリケーションを作成するための最も人気のあるフレームワークの 1つです。これは、React の標準的なプラクティスから逸脱したコード部分を強調するための StrictMode と呼ばれるヘルパーコンポーネントを提供します。

React の厳密モード

React StrictMode は、アプリケーションの潜在的な問題を浮き彫りにします。そうすることで、より読みやすく安全なアプリケーションを作成するのに役立ちます。この機能は React パッケージに含まれているため、個別にインポートする必要はありません。疑わしいコードがある場合は、それを StrictMode ヘルパーコンポーネントでラップします。それだけです。ここに機能的な React コンポーネントでそれを使用する方法：

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

この場合、ヘルパーコンポーネントで <SuspiciousComponent> をラップしました。子コンポーネントのコードを React の推奨プラクティスに反するものに変更した場合、StrictMode はアラームを発生させます。いくつかの悪い習慣がアプリをクラッシュさせないかもしれないので、これは必要です。アプリが動作するからといって、問題がないわけではありません。コードの一部に疑問がある場合は、<React.StrictMode> ヘルパーコンポーネントでラップして、問題がないことを確認してください。単一のコンポーネント、複数のコンポーネント、またはツリー全体をラップできます。

コンポーネントツリー全体で潜在的なエラーを探したい場合は、親コンポーネントの return ステートメントを見て、他のすべてのコンポーネントを含む <div>（または他の要素）をラップします。複雑なアプリケーションを作成した場合、StrictMode は必然的にいくつかのエラーを検出し、それらをコンソールに報告します。

Fragment ヘルパーコンポーネントと同様に、StrictMode は実際の UI をレンダリングしません。また、アプリケーションのスタイルにも影響しません。

React Strict Mode は、開発モードのバグを検出するために使用されます。すべてのエラーをクリーンアップし、アプリを本番環境で使用できるようになったら、アプリを削除できます。

React Strict モードの利点

React で StrictMode を使用することの明らかな利点に加えて、より高品質のコードを書くことを学ぶための便利なツールにもなります。

副作用からの保護

一部のライフサイクルメソッドは、レンダリングフェーズ中に複数回呼び出される可能性があるため、React では副作用を含めないことをお勧めします。この推奨事項は見過ごされがちであり、アプリケーションを外部の攻撃にさらす不正確な状態とメモリリークにつながります。幸い、StrictMode ヘルパーコンポーネントは、有害な副作用を見つけて修正するのに役立ちます。これを実現するために、StrictMode でラップされたコンポーネントのメソッドは意図的に 2 回呼び出されます。

時代遅れの慣行を検出する

findDOMNode のような機能はかつて ReactJS で許可されていましたが、現在は非推奨になっています。同じことがコンテキスト API にも当てはまります。これは、過去に広く使用されていましたが、間もなく削除されます。StrictMode は、古いメソッドや React 固有の機能について警告を発するための便利なツールです。

React Strict モードの最適な使用法

自分が作成していないコードベースを使用している場合、特に経験の浅い開発者が React アプリケーションを作成した場合は、StrictMode がコードの適切な編成を保証するための便利なツールになります。

JavaScript（React と組み合わせた）コードのバグを見つけるのは非常に難しい場合があります。ただし、コードを StrictMode でラップすると、何が間違っているのかについてのアイデアが得られる場合があります。

全体として、StrictMode は React で最も便利なツールの 1つです。初心者の開発者は、これを使用して、React の推奨プラクティスに準拠したコードを作成する習慣を身に付けることができます。厳密モードをいじるほど、快適に使用できるようになります。