問題一覧に戻る
中級副作用
問題37: 依存配列なし

毎回実行される処理とパフォーマンスへの影響を理解します。依存配列を省略した場合の動作を学びましょう。

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

function Logger() {
  const [text, setText] = useState("");
  const [renders, setRenders] = useState(0);

  // 依存配列なし
  useEffect(() => {
    // 毎レンダリング時に実行
    setRenders(r => r + 1);
  }); // 依存配列を省略

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>レンダー回数: {renders}</p>
    </div>
  );
}

export default Logger;
···