問題一覧に戻る
中級副作用
問題38: 空の依存配列

マウント時のみ実行される初期化処理を学びます。空の依存配列の使い方を理解しましょう。

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

function Setup() {
  const [time, setTime] = useState(new Date());

  // マウント時のみ実行
  useEffect(() => {
    console.log("初期化完了");
    // タイマー設定
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);
    // 空の依存配列
  }, );

  // 時刻を表示
  return <div>{time.toLocaleTimeString()}</div>;
}

export default Setup;
···