スプレッド構文 vs コールバック関数: React Hooks (useState) で配列状態を更新する正しい方法

2024-04-02

React Hooks (useState) での Push メソッド

Push メソッド は、配列の末尾に新しい要素を追加するために使用されます。

この 2 つを組み合わせることで、コンポーネント内で配列状態を更新することができます。

問題点

しかし、useState フックで直接 push メソッドを使用すると、いくつかの問題が発生します。

再描画されない: 通常、useState フックで状態を更新すると、コンポーネントは再描画されます。しかし、push メソッドは直接状態を更新するため、再描画がトリガーされません。
不変性: React は状態の不変性を保つことを推奨しています。push メソッドは元の配列を直接変更するため、不変性が失われます。

解決方法

これらの問題を解決するには、以下の方法を使用します。

スプレッド構文: スプレッド構文を使用して、新しい配列を作成し、その末尾に要素を追加します。
コールバック関数: useState フックの更新関数にコールバック関数を使用し、その中で新しい配列を作成します。

例

const [items, setItems] = useState([]);

const handleClick = () => {
  // スプレッド構文を使用
  const newItems = [...items, '新しい要素'];
  setItems(newItems);
};

// コールバック関数を使用
const handleClick = () => {
  setItems((prevItems) => [...prevItems, '新しい要素']);
};

上記の例は、単純な例です。実際のユースケースでは、より複雑な処理が必要になる場合があります。
useState フック以外にも、状態を管理するための方法はいくつかあります。状況に応じて適切な方法を選択する必要があります。

import React, { useState } from 'react';

const App = () => {
  const [items, setItems] = useState([]);

  const handleClick = () => {
    // スプレッド構文を使用
    const newItems = [...items, '新しい要素'];
    setItems(newItems);
  };

  const handleClick2 = () => {
    // コールバック関数を使用
    setItems((prevItems) => [...prevItems, '新しい要素2']);
  };

  return (
    <div>
      <button onClick={handleClick}>要素を追加</button>
      <button onClick={handleClick2}>要素を追加2</button>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

説明

handleClick 関数は、items 状態変数に新しい要素を追加します。新しい要素を追加するには、スプレッド構文を使用して、新しい配列を作成しています。

render 関数は、items 状態変数の内容をリストとして表示します。

実行結果

このコードを実行すると、以下のようになります。

ボタンをクリックすると、items 状態変数に新しい要素が追加されます。
リストには、items 状態変数に含まれるすべての要素が表示されます。

このサンプルコードは、useState フックで push メソッドを使用する方法を示しています。この方法を使用することで、コンポーネント内で配列状態を安全に更新することができます。

配列状態を更新する他の方法

const [items, setItems] = useState([]);

const handleClick = () => {
  const newItems = [...items, '新しい要素'];
  setItems(newItems);
};

コールバック関数

const [items, setItems] = useState([]);

const handleClick = () => {
  setItems((prevItems) => [...prevItems, '新しい要素']);
};

map メソッドを使用して、配列の各要素を処理し、新しい配列を作成することができます。

const [items, setItems] = useState([]);

const handleClick = () => {
  const newItems = items.map((item) => {
    if (item === '古い要素') {
      return '新しい要素';
    }
    return item;
  });
  setItems(newItems);
};

const [items, setItems] = useState([]);

const handleClick = () => {
  const newItems = items.filter((item) => item !== '削除する要素');
  setItems(newItems);
};

ライブラリ

immutable.js などのライブラリを使用して、不変性の高い配列を管理することができます。

import Immutable from 'immutable';

const [items, setItems] = useState(Immutable.List([]));

const handleClick = () => {
  const newItems = items.push('新しい要素');
  setItems(newItems);
};