Zenn
🖥

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

2023/09/01に公開
tech

コード例

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秒ごとに現在時刻が更新されていくのが分かる

image
image

環境

next@13.1.1

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-04

Discussion