React の力を活用する: useState と useEffect の包括的なガイド

useState の高度な使用例

1. 配列とオブジェクトの管理

状態の配列とオブジェクトを扱うときは、それらを不変に更新していることを確認する必要があります。これにより、バグにつながる可能性のある不要な突然変異が防止されます。

オブジェクトの配列の管理

const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]);
};

const removeItem = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};

状態のオブジェクトを更新しています

const [user, setUser] = useState({ name: '', age: 0 });

const updateUser = (field, value) => {
  setUser(prevUser => ({ ...prevUser, [field]: value }));
};

2. 機能アップデート

useState で機能更新を使用すると、特に非同期の状況で、現在の状態に依存する場合の問題を回避できます。

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

3. 遅延初期化

関数を使用して初期状態を設定できます。これは、高価な計算や初期値が props から導出される場合に役立ちます。

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? JSON.parse(savedCount) : 0;
});

useState の一般的なパターン

1. 管理対象コンポーネント

フォームで useState を使用して入力を制御する:

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
};

2.入力のデバウンス

useState と useEffect を使用してデバウンス入力を作成できます。

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

useEffect の高度な使用例

1. キャンセルを伴うデータの取得

データをフェッチするときは、アンマウントされたコンポーネントに状態が設定されるのを避けるために、コンポーネントのアンマウントを処理することをお勧めします。

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    if (isMounted) {
      setData(result);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

2. イベントの購読

WebSocket 接続やその他の外部データ ソースなどのイベントをサブスクライブできます。

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setMessages(prevMessages => [...prevMessages, message]);
  };

  return () => {
    socket.close(); // Cleanup on unmount
  };
}, []);

3. アニメーションと DOM 操作

アニメーションまたは直接 DOM 操作に useEffect を使用できます:

useEffect(() => {
  const element = document.getElementById('animate');
  element.classList.add('fade-in');

  return () => {
    element.classList.remove('fade-in'); // Cleanup
  };
}, []);

よくある落とし穴

1. 依存関係配列が欠落しています

依存関係配列を省略すると、レンダリングのたびにエフェクトが実行され、パフォーマンスの問題が発生する可能性があります。

// Avoid this if you only want it to run once
useEffect(() => {
  // Logic here
});

2. 間違った依存関係リスト

エフェクト内で使用されるすべての変数を必ず含めてください:

useEffect(() => {
  console.log(value); // Make sure 'value' is included in the dependency array
}, [value]); // Include all dependencies

3. 以前の状態に基づいて状態を更新する

古いクロージャを避けるために、以前の値に基づいて状態を更新するときは、常にセッターの関数形式を使用してください。

setCount(prevCount => prevCount + 1); // Correct

結論

useState と useEffect はどちらも、状態を管理し、機能コンポーネントの副作用を効果的に処理できるようにする React の必須のフックです。高度なユースケースとパターンを理解すると、よりクリーンで効率的な React コードを作成するのに役立ちます。

以上がReact の力を活用する: useState と useEffect の包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。