React + TypeScript: 状態に収めた配列を更新する（初心者メモ）

メモ

React + TypeScript: 状態に収めた配列を更新する

要するに React では配列を直接変更しても画面には反映されない。
配列に対するどのような変更であっても 新しい配列を作成してセッターに代入 という手法を取る必要がある。

場合によっては非常に非効率な（直感に反する）コードを書くことになるが、このルールが絶対。

コード例

要素の追加

push() しても無意味。
concat()、スプレッド構文を使用して、新しい配列を生成し、セッターに代入（setArtists）

setArtists([...artists, { id: nextId++, name }]); 

要素の削除

pop()、shift()、splice() はすべて無意味。
filter()、slice()を使用して、新しい配列を生成し、セッターに代入（setArtists）

setArtists(artists.filter(({ id }) => id !== artist.id));

要素の変更

添え字を使用して配列の中身を書き換えても無意味。
map() を使用する。
オブジェクトの配列で１要素の１プロパティを変更する場合でも、新しい配列を生成し、セッターに代入（setArtists）

const nextShapes = shapes.map((shape) =>
	shape.type === 'square'
	? {
		...shape,
		type: 'circle',
		color: 'deeppink'
	}
	: {
		...shape,
		y: shape.y + 50
	}
);
setShapes(nextShapes);