Reactでのスプレッド構文によるオブジェクトの更新

お久しぶりです。
最近reactを学習しているため、詰まった部分を備忘録として残していきます。

1. 基本のアプローチ

• Reactのstateは、一度の更新でオブジェクト全体が置き換わる。
• そのため、一部のフィールドだけを変更したい場合、他のフィールドも明示的にコピーして保存する必要がある。

2. スプレッド構文を使った更新の例

たとえば、positionというオブジェクトにx, y, z, wのプロパティがある場合、yだけを変更したいときの書き方は次の通り:

setPosition({ ...position, y: 100 });

動作の解説

1. ...position： 現在のpositionの全てのプロパティをコピーして伸展。
   例: { x: 0, y: 50, z: 100, w: 200 }
2. y: 100： yの値を100に上書き。その他のプロパティは保存される。

結果:

{ x: 0, y: 100, z: 100, w: 200 }

3. スプレッド構文の注意点 { x: 100, ...position }じゃダメなのか？

• 同じプロパティは、書き方順に上書きされる。
  • たとえば:

    { ...position, x: 100 } // xが100に変更
    { x: 100, ...position } // xが元のpositionの値に戻る
    

4. Reactの不変性の解釈

• Reactは、オブジェクトを**直接変更しない。**新しいオブジェクトを作成して交換する。
• これにより、リレンダリングが有効に働き、パフォーマンスが保たれる。

5. 別の方法での更新

• 独立した変数として管理する方法:

  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  setY(100); // yのみ変更
  

• 変更のターゲットが変わると不便なら、この方法も選択肢の一つ。

---