useEffect

ライフサイクルイベントの代替として用いられるが，必ずしも同じ概念ではない．

描画の更新が行われるタイミングで変数に変化があった場合のみ実行するコールバックを設定できる．

親が再描画された時

Propsの値が変化した時

useStateの変数が変化した時

カスタムフックより受け取っている変数が変化した時

code:.ts

import React, { useEffect } from 'react';

const Foo = () => {

useEffect(() => {

// 実行する処理

},依存変数を配列で与える */);

}

第2引数を省略するとあらゆる再描画時に処理が走るが，useEffect内でuseStateを利用しているなどの場合に無限ループする．

初回のみ実行したい場合は空の配列を与える．

code:.ts

useEffect(() => {

// 処理

}, []);

useEffectで指定するコールバックの返り値に関数を指定することで終了処理のようなものが書ける．

コンポーネントが破棄されるタイミング

useEffectの依存変数に変更が起こり，新たにuseEffectが実行される前．

code:.ts

useEffect(() => {

// 処理

return () => {

console.log('次のuseEffectを始める前かコンポーネントが破棄された瞬間');

}

}, []);