問題一覧に戻る
中級副作用
問題39: 特定の依存値

値の変更を監視し、条件付き副作用を実装します。依存配列に特定の値を指定する方法を学びましょう。

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

function Watcher() {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  // 特定の値を監視
  useEffect(() => {
    // countが変更された時のみ実行
    setDouble(count * 2);
    // countを監視
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <p>カウント: {count}</p>
      <p>2倍: {double}</p>
    </div>
  );
}

export default Watcher;
···