React

ドキュメント

Overview

Reactは、Facebook（現Meta）が開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を効率的に作成するために使用される。
特に、Webアプリケーションやシングルページアプリケーション（SPA）の開発で人気がある。

特徴

1. コンポーネントベースのアーキテクチャ UIを独立したコンポーネントに分けて作成する。コンポーネントは再利用可能で、複雑なUIも簡単に管理できる。
2. 仮想DOM Reactは「仮想DOM」という技術を使用して、DOM操作を効率的に行う。これにより、実際のDOM操作を最小限に抑え、パフォーマンスを向上させる。
3. 宣言的プログラミング Reactでは、UIの状態を記述し、状態が変わると自動的にUIが再レンダリングされる。これにより、DOMを手動で操作する必要がなくなります。
4. エコシステムとツールチェーン Reactは単なるUIライブラリですが、React Router、Redux、Next.jsなど、豊富な周辺ツールが存在し、複雑な機能を簡単に追加できる。

Reactを使うことで、パフォーマンスが高く、メンテナンスしやすいインタラクティブなWebアプリケーションを効率的に作成できる。

こちらが校正および情報を追加した文章です。

Strict Mode

React18 から Strict Mode が導入された。 これは、アプリケーションが正しい振る舞いをしているかどうかを検証（assertion）するために導入されたモードです。具体的には、useEffect が実行された後に状態（state）を一度リセットして、再度コンポーネントをレンダリングしようとする挙動が発生します。

公式ドキュメントにも記載されている通り、Reactではコンポーネントの再レンダリングやリソースの読み込みにおける状態管理を適切に行う必要がある。
これに伴い、Strict Mode を有効にすると、開発環境においてコンポーネントが複数回マウント・アンマウントされる状況に対応できるように、特定のコードパスが何度もトリガーされる問題が浮き彫りになる。 このモードは、特に「2回目のマウントがあるとエラーが発生するようなコード」を発見し、開発者が問題を早期に修正できるようチェック機能を提供しています。

解決方法

上記の挙動に基づいて、再レンダリングや状態のリセットに問題が起きないコードを書くことが推奨されます。特に、useEffect の副作用処理や状態管理において、再レンダリングが正しく行われるように設計することが重要です。Strict Mode で問題が顕在化する場合、そのコードはより堅牢な状態管理やレンダリング処理が求められるという合図になります。

このように、公式の情報や挙動に関する説明を整理しつつ、解決方法を明確にしました。

Reactのレンダリング失敗時

サスペンドが発生したらその部分だけでなく周りも巻き込んで表示できなくなる点に留意。
「エラーしたコンポーネント部分だけ何も表示されない」のような挙動ではなく、「App全体が表示できない」という挙動になる。
これはReactが提供する一貫性保証の一部であり、ある瞬間にレンダリングされたコンポーネントツリーが部分的に表示されてしまうようなことを防ぐため。
全部表示できるか、全部表示できないかのどちらか。

ヒント

サスペンドというのはコンポーネントがレンダリングできない状態

備考

それを解決するのがError BoundaryコンポーネントやSuspenseコンポーネント

Error Boundaryコンポーネント

リファレンス
Error Boundary試せるサイト

以前は、コンポーネント内で発生したJavaScriptエラーがReactの内部状態を破壊し、次のレンダリング時に予期しないエラーが発生する。
これらのエラーは常に、アプリケーションコード内の以前の問題に起因していましたが、Reactはコンポーネントでエラーを適切に処理する方法を提供しておらず、エラーから回復できなかった。

UIの一部でJavaScriptエラーが発生しても、アプリ全体がクラッシュしてはならない。
この問題を解決するために、React 16では**Error Boundaries（エラー境界）**という新しい概念が導入された。

エラー境界は、子コンポーネントツリー内の任意の場所でJavaScriptエラーをキャッチし、それらのエラーをログに記録し、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示するReactコンポーネント。
エラー境界は、レンダリング中、ライフサイクルメソッド、およびその下のツリー全体のコンストラクターでエラーをキャッチする。

注意

ただし、Promiseによる非同期エラーはキャッチできない。

Error Boundaryを改良したSuspenseコンポーネント

コンポーネントを「ローディング中なのでまだレンダリングできない」という状態にするのが特徴。
ReactはコンポーネントをレンダリングしてDOM（など）に反映することが役割のライブラリなので、ローディングできないコンポーネントがあるということはレンダリング結果が無くてDOMへの反映もできないということになってしまう。

そこで Suspense というコンポーネントが、内部でレンダリングが失敗したコンポーネントのハンドリングを担当してくれる。
これはまるでJavaScriptのtry-catch文のようです（実際、Suspenseの機構と、Reactの既存機能であるErrorBoundaryの機構はとても似ている）

Resource

onClickが2度呼ばれる
useStateで配列要素を追加・削除・変更する方法
react-hooks-testing-libraryドキュメント
React Three Fiber + TypeScript: 3次元空間で立方体を回してみる
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた
material-ui 9個のfree_templateがある
React の再レンダリングを防ぐ3つのパターン