Reactで現在時刻を取得する方法

Reactで現在時刻を取得する方法

Reactで現在時刻を取得し表示するには、useStateとuseEffectフックを使用します。
以下はTypeScriptを使用した例です。

ソースコード例

import React, { useState, useEffect } from 'react';

const Clock: React.FC = () => {
  const [time, setTime] = useState<string>(new Date().toLocaleTimeString());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

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

  return (
    <div>
      <h1>現在時刻</h1>
      <p>{time}</p>
    </div>
  );
};

export default Clock;

説明

1. useStateフックで現在時刻を保存するためのtimeというステートを宣言しています。
初期値として現在時刻をnew Date().toLocaleTimeString()で取得しています。
2. useEffectフックで1秒ごとにsetIntervalを使用して現在時刻を更新しています。
コンポーネントがアンマウントされるときにclearIntervalを呼び出してタイマーをクリアします。
3. JSX内で現在時刻を表示しています。

これで、毎秒更新される現在時刻を表示するReactコンポーネントが完成します。