React - React.memo

今回は、レンダリングのパフォーマンスを最適化しています.
React.覚書について勉強した.
サンプルコードを次に示します.

const testList = ({user,tabSelect}) => {
	const list = arr[100]
    return (
      {list.map((item) => 
          <test 
            key={item.uniqueIdx} 
            item={item} 
            user={user} 
            tabSelect={tabSelect} 
          />
		}
    )
}


const test = ({item,user,tabSelect}) => {
  ...
  
	return (
		<>
			<tr className={styles.root}>
				<th>
					<ToggleIconButton callback={handleIconClick} type={open} />
				</th>
				<td>
					{list.date}
				</td>
				<td align="center">{list.time}</td>
				{!user && <td align="center">{list.userName}</td>}
				{!user && <td align="center">{list.nickname}</td>}
				<td align="center">{list.title}</td>
			</tr>

			{open && 
				<Box content={list.content} user={user} handleEditProblem={handleEditProblem} handleDeleteProblem={handleDeleteProblem}/> 
			}
		</>
    )
}

testList関数はランダムに作成されます.
test関数はすべて持ってきました.
map関数を使用して構成部品をロードしたため、キー値のために再レンダリングするとアンインストールされません.
testからレンダリング項目を削除すると、refreshを使用してrecoil関数を初期化し、testListで使用されるlistはrefreshをlistにします.地図はずっと回ります.
同時に、コンソールはキー値を比較しないことを直接確認してレンダリングを続行します.

レンダリングしたくないなら?

まず最初の案で反応しますmemoを使用しますが、コンソールは引き続き撮影されます.
アイテムとして受信したデータを変更することはできません.

export default React.memo(Row,dataPropsEqual);

同様に、比較propsの関数を作成して解決することができる.

function dataPropsEqual(prevProps, nextProps){
	const {
		list:prevList, tabSelect:prevFn, user:prevUser
  } = prevProps;

	const {
    list:nextList, tabSelect:nextFn, user:nextUser
  } = nextProps;

	const prevListKeys = Object.keys(prevList)

	let flag = true;
	for( const a of prevListKeys){
		if(flag) flag = prevList[a] === nextList[a]
	}

	return flag && prevFn === nextFn && prevUser === nextUser;
}

リストはitemです
各データ値を比較し、一致する場合は再レンダリングは発生しません.