ふくしま

ソフトウェアエンジニア

ReactのマウントとかuseEffectとか再レンダリングとか

概要

ただのメモなので悪しからず。そもそもネットに公開するようなものでもない。

メモ

マウント

マウントとは、Reactコンポーネントが初めてDOMに挿入(レンダリング)されるプロセスのことを指す。このプロセスでは、コンポーネントが画面上に表示される初期状態が構築される。クラスコンポーネントではcomponentDidMountメソッドが、関数コンポーネントでは空の依存配列を持つuseEffectフックが、マウント時の特定の処理を実行するために利用される。マウントは、コンポーネントのライフサイクルにおいて最初に発生するフェーズらしい。

useEffect

useEffectは、関数コンポーネント内で副作用(side effects)を扱うためのフックである。これにより、データのフェッチ、イベントリスナーの設定、DOMの直接操作など、レンダリング結果とは独立した操作を実行できる。useEffectは、依存配列に指定された値の変更を検知して副作用を再実行する。依存配列が空の場合、副作用はコンポーネントのマウント時とアンマウント時にそれぞれ1回ずつ実行される。

レンダリング

レンダリングとは、コンポーネントのステートやプロップスが更新された際に、コンポーネントが新しい状態やデータでDOMを再構築するプロセスである。Reactは変更があった部分のみを効率的に更新するため、アプリケーションのパフォーマンスが保たれる。再レンダリングは、ユーザーの操作やデータの変更に応じてUIを動的に更新するために不可欠なプロセスらしい。

setState

setStateは、クラスコンポーネントにおいてステートを更新するためのメソッドである。関数コンポーネントでは、useStateフックから得られるsetter関数が同様の役割を果たす。setStateやsetter関数を使用してステートが更新されると、コンポーネントは再レンダリングされ、新しいステートやプロップスに基づいたUIが表示される。これにより、アプリケーションはユーザーの操作や外部データソースの変更に柔軟に対応できるようになるらしい。