[React] Immerをちゃんと理解する

Immerを使ってJavaScriptの状態管理を革新する

Reactでは状態更新時、イミュータブルを意識して実装する必要があります。
今回は、イミュータブルを意識した実装を容易にしてくれる「Immer」についてご紹介します。

Immer（イマー）とは？

データが作成された後、変更されない性質を「不変性」と呼びます。

Immer はJavaScriptのライブラリで、不変性（immutable）を保ちながら状態を管理するプロセスを簡素化します。
具体的には、オブジェクトが更新された時、古いオブジェクトは変更せず新しいオブジェクトを作成します

以下はRedux Toolkitを使用した状態更新のサンプルコードです。
Redux Toolkitには、デフォルトでImmerがインストールされています。

import { configureStore, createSlice } from '@reduxjs/toolkit';

const initialState = {
    name: 'Taro',
    age: 20
};

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        incrementAge(state) {
            /*
              stateの更新 => ageプロパティが更新された新しいオブジェクトが生成
              nameプロパティは、旧オブジェクトの参照が継続して保持される。
            */
            state.age += 1;
        }
    }
});

Immerのメリット

• オブジェクトの参照効率化
• 変更検出の効率化

オブジェクトの参照効率化

Immerは変更されたプロパティを含む新しいオブジェクトを生成します。
変更されていないプロパティについては、元のオブジェクトの参照を再利用します。

変更検出の効率化

Immerを使うと、新旧オブジェクトの参照を比較するだけで、変更があったかどうかを判断できます。
オブジェクトツリーを詳細にチェックする必要がなくなるため、パフォーマンスが向上します。

まとめ

以上です！
Redux ToolKitではImmerがデフォルトでインストールされるため、ちゃんと理解しておきます