Reactの破壊的変更と非破壊的の違いについて

Question

Reactの破壊的変更の理解ができず教えていただきたいです。
下記のようなコードでも破壊的変更ではないと思ってたのですが、破壊的変更に該当することがわかりました。

 const [num, setNum] = useState({ name: 'Alice', age: 25 })

  const addNum = () => {
    setNum((preNum) => {
      const updateData = [...preNum]
     updateData.age = 26
      return updateData
    })
  }
  return (
    <>
      <button onClick={addNum}>変更</button>
      <p>{num.age}</p>
　　//ボタンを押すと値が増えていく。
    </>
  );

下記コードでは破壊的変更に考慮されているようなのですが、
同じstateを更新しているのに違いがわからないでいます。
上記コードの「updateData.age = 26」で元のstateも変更されてしまうからいけないということなのでしょうか？

 const [num, setNum] = useState({ name: 'Alice', age: 25 })

  const addNum = () => {
    setNum((preNum) => {
      const updateData = [...preNum, age: 26]
      return updateData
    })
  }
  return (
    <>
      <button onClick={addNum}>変更</button>
      <p>{num.age}</p>
　　//ボタンを押すと値が増えていく。
    </>
  );

Comments

[退会済みユーザー]

const updateData = [...preNum, age: 26]
ではなく
const updateData = {...preNum, age: 26}
では？

Answer 1

下記のようなコードでも破壊的変更ではないと思ってたのですが、破壊的変更に該当することがわかりました。

視点の違いかもしれません。

updateDataに対しては破壊的変更なのは間違いないですが、setNumで新しいオブジェクトをセットできているのもまた正しいです（Reactの動作としては全く問題ありません）。

Comments

[maisumakun]

なお、スプレッド時のカッコが違う問題はいったん脇においておいて回答しています。

Answer 2

暇で死にそうだったので 長文で回答させていただきます。

破壊的・非破壊的とはなにか

reactに限らずプラグラミングにおいて「破壊的操作」という単語は「メモリ参照を持つタイプの型の値を変更する際に、参照先の値を直接変更する」ことを一般的には指しています。

オブジェクトだと分かりにくいため配列で説明します。

const person = { name: 'Alice', age: 25 }; // これは参照を持つオブジェクト型のオブジェクト
const persons = [person, person]; // これは参照を持つオブジェクト型の配列

// 破壊的な変更を破壊的メソッドpushで行う
const updatedPersons = persons.push(...person);
console.log({ updatedPersons, persons }); // => personsの値(参照)も変更されている

// 破壊ではない変更を非破壊的メソッドconcatで行う
const updatedPersons = persons.concat(persons);
console.log({ updatedPersons, persons }); // => personsの値(参照)は変更されない

Arrayメソッド破壊・非破壊チートシート

reactにおける破壊的・非破壊的について

上記を念頭に質問者さんのコードを元に破壊的・非破壊的変更の例を確認します。
余談ですがreactでこの問題について、意味は少し異なりますがミュータブル(可変)・イミュータブル(不変)という単語が使われることが多いです。

const [person, setPerson] = useState({ name: 'Alice', age: 25 });

// ① 破壊的変更を行うハンドラー
const destroyableUpdate = () => {
    person.age = 26;
    setPerson(person);
};

// ② 非破壊的変更を行うハンドラー
const undestroyableUpdate = () => {
  const newPerson = { name: 'Alice', age: 26 };
  setPerson({ ...person, ...newPerson });
};

return (
  <>
    <button onClick={destroyableUpdate}>破壊的変更</button>
    <button onClick={undestroyableUpdate}>非破壊的変更</button>
    <p>{person.age}</p>
  </>
);

① 破壊的変更を行うハンドラー
この関数ではオブジェクトのプロパティを直接変更しています。
(オブジェクトAのプロパティを変更しても参照はAのまま)

そのため、stateを更新しても参照が変わっていないため表示は変化しません。
(AとAは同じ参照のため、reactが差分がないと判断して再描画しない)
この時のstateをshallow copyされたオブジェクトと呼びます。

② 非破壊的変更を行うハンドラー
この関数では新たにオブジェクトを作成して、そのオブジェクトの値を変更しています。
(オブジェクトBを作成して、オブジェクトAの値をコピー&値を上書き)
この時のstateをdeep copyされたオブジェクトと呼びます。

そのため、stateを更新すると参照も変わっているため表示が変化します。
(AからBに参照が変わっているため再描画される)

動作サンプルを作りましので試してみると理解が促進されると思います↓
https://codesandbox.io/s/floral-snow-fp6fxr?file=/src/App.js

なお、上述した「参照が変わったら再描画される」という動きは、値を変えていない場合にも同様です。
つまり必要性がないケースで再描画されるコードを書いてしまう可能性があるという状況が想定されます。

この意図せず再描画される・されないケースを防ぐために、immutable.jsやimmerと呼ばれるライブラリが利用されることがあります。

恐らく、質問者さんの受けた指摘？は正確には「オブジェクトの参照が変わらない方法でstateを更新しているため、意図しない再描画が行われる可能性があります」ではないでしょうか？

Comments

[maisumakun]

「reactにおける破壊的・非破壊的について」の回答サイドのコードが破壊的になっていないようです。

[tkc310]

ご指摘ありがとうございます！
修正しました。