useStateのコールバック関数 vs useEffect フック：使い分けのポイント

React Hooksの useState でコールバックを使用する

このコールバック関数は、状態更新後の最新の状態を受け取ります。これは、いくつかのユースケースで役立ちます。

前回の状態に基づいて状態を更新する場合

例えば、count という状態変数があり、ボタンをクリックするたびに 1 ずつ増加させたいとします。しかし、前回の count 値に基づいて新しい値を設定したい場合もあります。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

この例では、setCount 関数にコールバック関数を渡しています。このコールバック関数は、前回の count 値を受け取り、その値に 1 を加算した新しい値を返します。

状態更新後に何かを実行する場合

状態更新後に、何か別の処理を実行したい場合もあります。例えば、count 状態が更新されたら、API 呼び出しを行うなどです。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);

  // 状態更新後に API 呼び出しを行う
  if (count === 10) {
    fetch('/api/update-count', {
      method: 'POST',
      body: JSON.stringify({ count }),
    });
  }
};

この例では、count 状態が 10 になった時に、fetch API を使用してサーバーに更新された値を送信しています。

状態更新の副作用を分離したい場合、コールバック関数を使用することができます。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

const updateCount = () => {
  // 状態更新の副作用をここに記述
  console.log(`Count updated to ${count}`);
};

useEffect(() => {
  // 状態更新後に `updateCount` 関数を実行
  setCount(prevCount => prevCount + 1, updateCount);
}, []);

この例では、updateCount 関数に状態更新の副作用を記述しています。setCount 関数の 2 番目の引数に updateCount 関数を渡すことで、状態更新後にこの関数が実行されます。

useState のコールバック関数は、さまざまなユースケースで役立ちます。状態更新後の最新の状態を受け取ることができるので、複雑なロジックを記述する際に便利です。

前回の状態に基づいて状態を更新する

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

const Example = () => {
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

export default Example;

状態更新後に何かを実行する

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);

  if (count === 10) {
    fetch('/api/update-count', {
      method: 'POST',
      body: JSON.stringify({ count }),
    });
  }
};

const Example = () => {
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

export default Example;

状態更新の副作用を分離する

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

const updateCount = () => {
  // 状態更新の副作用をここに記述
  console.log(`Count updated to ${count}`);
};

useEffect(() => {
  // 状態更新後に `updateCount` 関数を実行
  setCount(prevCount => prevCount + 1, updateCount);
}, []);

const Example = () => {
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

export default Example;

これらのサンプルコードは、useState のコールバック関数の使用方法を示しています。これらの例を参考に、さまざまなユースケースでコールバック関数を活用してみてください。

useState のコールバック関数以外の方法

useEffect フックは、状態更新など特定のタイミングで処理を実行するのに役立ちます。

const [count, setCount] = useState(0);

useEffect(() => {
  // 状態更新後に API 呼び出しを行う
  if (count === 10) {
    fetch('/api/update-count', {
      method: 'POST',
      body: JSON.stringify({ count }),
    });
  }
}, [count]);

const Example = () => {
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count => count + 1)}>カウントを増やす</button>
    </div>
  );
};

export default Example;

この例では、useEffect フックを使用して、count 状態が 10 になった時に fetch API を実行しています。

useRef フックは、レンダリング間で値を保持するのに役立ちます。

const [count, setCount] = useState(0);

const ref = useRef();

useEffect(() => {
  // 状態更新後に `ref` の値を更新
  ref.current = count;
}, [count]);

const handleClick = () => {
  // `ref` の値を使用して何かを行う
  console.log(`Count updated to ${ref.current}`);

  setCount(count => count + 1);
};

const Example = () => {
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

export default Example;

この例では、useRef フックを使用して、count 状態の最新値を ref 変数に保持しています。handleClick 関数では、ref 変数の値を使用して、状態更新後の処理を実行しています。

カスタムフックを作成する

複数のコンポーネントで同じような処理を使用する場合は、カスタムフックを作成することでコードを再利用できます。

import { useState, useEffect } from 'react';

const useCount = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 状態更新後に何かを行う
    console.log(`Count updated to ${count}`);
  }, [count]);

  const handleClick = () => {
    setCount(count => count + 1);
  };

  return {
    count,
    handleClick,
  };
};

const Example = () => {
  const { count, handleClick } = useCount();

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

export default Example;

この例では、useCount というカスタムフックを作成しています。このフックは、count 状態と、handleClick 関数を公開しています。Example コンポーネントでは、useCount フックを使用して、count 状態と、handleClick 関数を取得しています。

useState のコールバック関数以外にも、さまざまな方法で状態更新後の処理を実行することができます。それぞれの方法のメリットとデメリットを理解して、状況に応じて適切な方法を選択してください。