reactでのuseEffect内のsetIntervalの実行タイミングについて

Question

reactでのuseEffect内のsetIntervalの実行タイミングについて困っています

useEffect(() => {
    setInterval(hoge, 3000);
  }, []);

現在このようなコードなのですが、画面がレンダリングされたときに走ってしまします。
第二引数にトリガーとなる関数を入れたらいいのはわかっているのですがなってほしい動きとしては、何かの処理が走れば実行してその後にはuseEffectは走らせないにようにしたいです

こういった場合はusestateなどで調整などするのでしようか？

Answer 1

例えばこんな感じでしょうか。

useEffect の第二引数は値の配列で、どれかの値が変わったら第一引数が実行されます。以下のコードでは初回および flag の値が変わった時に実行されるので、flag が true の時だけ実行したければ if で分岐すれば良いでしょう。

また、useEffect の第一引数の戻り値も重要で、クリーンアップ関数を返せば次に useEffect の第一引数を実行する前にクリーンアップ関数を実行してくれます。つまり、以下のコードでは flag を false にすればタイマー処理が停止します。

実行の流れはこんな感じになります。

1. 初回レンダー時には flag は false なので、何もしません。
2. ボタンを押すと flag が true になり、タイマー処理が開始され、クリーンアップ関数を返します。
3. もう一度ボタンを押すと flag が false になり、クリーンアップ関数が実行されてタイマー処理が停止します。
4. 2 へ戻る

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if (flag) {
      const interval = setInterval(() => setCount(count => count + 1), 3000);
      return () => clearInterval(interval);
    }
  }, [flag]);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setFlag(!flag)}>{!flag ? 'Start' : 'Stop'}</button>
    </>
  );
}

Comments

[GensIto]

今回もご回答ありがとうございます。
今いただいたコードを試したのですが、思っている挙動になりましたありがとうございます。
この質問は前回の質問と続いておりまして、tokenの配列がなくなった時にリセットしたいのですがその場合はif分のelseにはどう書けばsetIntervalをリセットすることができるでしようか?

[hoshi-takanori]

if (token.length > 0) とか？ でも、第二引数が [token] だと、token に値を追加・削除するたびにタイマーが再起動されるかも…。

[GensIto]

そーですよね。
今回は実装しなくてもいいのですが興味本位でお聞きしました！
今回もありがとうございました^ ^