【React】オブジェクトの一部プロパティ変更

問題

アプリ内でオブジェクトに所属している一部のプロパティを変更したが、
レンダリングされなかった。

以下はボタンをクリックすれば表示されるユーザー名が"alchoding"から
"drinker"に変更するコードになるが、実際画面に表示される名前は変わらない。

import { useState } from "react";

function App() {
  const [user, setUser] = useState({
    userName: "alchoding",
    friend: null,
  });

  const changeUserName = () => {
    user.userName = "drinker";
  }
  return(
    <>
      <p>ユーザー名 : {user.userName}</p>
      <button onClick={changeUserName}></button>
    </>
  )
}

解決法

userNameプロパティを更新し、spreadを使って新しい参照を持つオブジェクトを作成する。

const changeUserName = () => {
    setUser({
      ...user,
      userName: "drinker"
    });
  };

原因

Reactはstateが変更されたらshallow compareを利用して値の変更をキャッチする。上記でuserが持つuserNameのプロパティのみが変更された場合、userオブジェクトの参照がアップデートされたわけではないためプロパティの一部が変更されても同じオブジェクトだと認識する。

使用例

アプリのプロファイルオブジェクトから名前のみを変更するなど