useEffectのメモ

最終更新日: 2021-07-03

確認環境

Env	Ver
React	17.0.2
react-router-dom	5.2.0

リソースの開放

公式の副作用フックの利用法にもありますが、useEffect() の戻り値にアロー関数を渡して、その中に開放処理を書けば開放されます

サンプルコード

  const { listen } = useHistory();

  useEffect(() => {
    const unlisten = listen((loc) => {
      console.log(loc);
    });

    return () => {
      unlisten();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

バインドされた state を更新する

useEffect() の中で setTimeout() や setInterval() みたいなのを使うと初回実行時の state が拘束されままになり、更新されない これを避けるためには、state が変わる度に useEffect() が実行される必要がある つまり setInterval() で state を扱うのは事実上無意味なので setTimeout() の方が良い

サンプルコード

  const {val, increment} = useCount();

  useEffect(() => {
    const time = setTimeout(() => {
      increment();
      console.log(val);
    }, 300);

    // 毎回ハンドラをクリアする
    return () => {
      clearTimeout(time);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    // valの更新をトリガーにして、常に最新になるようにする
  }, [val]);