React 関数コンポーネント(stateless component)のライフサイクルイベント
備忘録
React のクラスコンポーネントは componentDidMount
や componentDidUpdate
などのライフサイクルイベントを使用することが出来る。
しかし、関数コンポーネント(stateless component)は上記のようなメソッドは使用できない。
代わりにuseEffect
を使用する。
公式ドキュメントによると、useEffect
はクラスコンポーネントのライフサイクルイベント(componentDidMount
componentDidUpdate
componentWillUnmount
)をすべてになっている。
つまり、DOMの更新前にuseEffect
が発火し、DOMの更新後にもuseEffect
が発火する。
なお、useEffect
の第2引数に変数を渡すことで、変数に変更があった場合のみ発火するといったVueJsの算出プロパティっぽい(微妙に違うけど)使い方もできる。