React 関数コンポーネント(stateless component)のライフサイクルイベント

備忘録

React のクラスコンポーネントcomponentDidMountcomponentDidUpdateなどのライフサイクルイベントを使用することが出来る。
しかし、関数コンポーネント(stateless component)は上記のようなメソッドは使用できない。
代わりにuseEffectを使用する。

ja.reactjs.org

公式ドキュメントによると、useEffectはクラスコンポーネントのライフサイクルイベント(componentDidMount componentDidUpdate componentWillUnmount)をすべてになっている。
つまり、DOMの更新前にuseEffectが発火し、DOMの更新後にもuseEffectが発火する。

なお、useEffectの第2引数に変数を渡すことで、変数に変更があった場合のみ発火するといったVueJsの算出プロパティっぽい(微妙に違うけど)使い方もできる。

ja.reactjs.org