Next.js(React) – sleepを実装するには setInterval と clearInterval を使えば良いようだ

コード例

1秒単位で現在時刻を書き換えてみる

Example.tsx

import {useState, useEffect} from 'react'

const Sleep = () => {
  const [data, setData] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      setData(Date().toLocaleString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return data ? <div>{data}</div> : <div>Loading...</div>;
}

export default Sleep;

ちなみに clearInterval(interval) を消すと1ループあたり2回処理されてしまう模様

動作例

1秒ごとに現在時刻が更新されていくのが分かる

環境

next@13.1.1

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter