useEffectのよくやるパターンをメモっ!

componentDidMountの置き換え

componentDidMount() {
  getHogeList();
}

mount時にデータ取得するようなやつ。

useEffect(() => {
  getHogeList();
}, []);

二つ目の引数に空のArrayを渡すと最初のrender後にだけ実行される。

componentDidUpdateの置き換え

componentDidMount() {
  getHogeList();
}
useEffect(() => {
  getHogeList();
});

何も指定しなければstateが変更された時に実行される。
これをもう少し細かく制御したい場合は

const [id, setId] = useState(1);

useEffect(() => {
  getHogeList();
}, [id]);

のような感じで、2つ目の引数で指定したstateが変更された時だけ実行されるようにできる。

追記予定?

他にも追加するかも・・?

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください