前回までの記事

参考

useEffect – React

https://ja.react.dev/learn/synchronizing-with-effects

https://zenn.dev/fujiyama/articles/c26acc641c4e30

https://zenn.dev/uhyo/articles/useeffect-taught-by-extremist

https://kinsta.com/jp/knowledgebase/react-useeffect/

https://qiita.com/keiya01/items/fc5c725fed1ec53c24c5

前回の記事では、useEffectは副作用を扱うためのHooksであることに言及。

今回は、どのようなパターンに使うべきで、どのようなパターンに使うべきではないかを整理する。

useEffectの使い方

基本的な使い方

import  { useEffect, useState } from "react";

const Effect = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
	  //副作用関数を入れる
    window.setInterval(() => {
      setCount(prev=>prev+1);
    },1000);
  }, []);

  return (
    <>
      <h1>{count}</h1>
    </>
  );
};
export default Effect;

基本的な使い方は”useEffect(setup,depencies)”となる

setup・・・副作用関数

depencies・・・依存変数

依存変数が指定されると、副作用関数がトリガーされるようになる。

上記では[]が指定されており、この場合は初回のレンダリング時に実行される形になる。

クリーンアップ

コンポーネントはマウントしたり、アンマウントされたりする。アンマウントされた場合、実行されている副作用は基本的に不要になるわけなので、これを削除してあげないとメモリーリークが発生する可能性がある。