Redux Selector再レンダリング最適化

デフォルトでは、ワイヤ上でショップが変更された場合(割り当てが発生した場合)、ユーザーセレクタhookを使用するすべての構成部品のユーザーセレクタパラメータがstoreのstateと比較されます.
ただし、stateがprimitive value以外のオブジェクト、配列などであれば、実際の値を変更しなくても他のオブジェクトとして再レンダリングされます.
解決策

ユーザー・セレクタが使用されます.

{
	id:'1'
  name: 'choi'
}

例えば、storeに格納されているcurrentUser情報が上記と同じである.
userstateを使用する構成部品で

const userId=useSelect(state=>state.user.currentUser.id);
const userName=useSelect(state=>state.user.currentUser.name);

このように使用すると、currentUserが変更されない限り、再レンダリングは行われません.
しかし、そのように使うのはあまりにも可読性がありません.
2.ユーザセレクタの2番目のパラメータに直接EqualityFnを入れます.

equalityFn?: (left: any, right: any) => boolean

前の値(左)と次の値(右)を比較し、trueの場合は再レンダリングしません.falseの場合は再レンダリングします.
次の例を示します.

const currentUser=useSelect(state=>state.user.currentUser,
			(left,right)=>left.id===right.id&&left.name===right.name);

3.Reselect libraryの利用
セレクタとして、キャッシュは同じ計算を回避し、パフォーマンスを向上させることができます. パラメータが以前と同じ値を渡す場合 再計算せずに保存した結果値を返すライブラリ

import {createSelector} from 'reselect'

const selectUserReducer=(state)=>state.user;

const selectCurrentUser = createSelector(
	[selectUserReducer],
	(userSlice) = > userSlice.currentUser
);

const currentUser=useSelect(selectCurrentUser);