Reactのstate hookに値を変更した配列を渡してもre-renderされなかった

タイトル通りです。
JSのArrayは参照渡しということがわかっていなかったのと、ReactのuseStateの理解が浅かったことが原因で若干時間をとってしまいました。

起こったこと

(コンポーネントの設計が色々とアレなのは許してください...)

一覧表示画面を実装していました。

//色々略

const App = () => {
	//略

	const [blogs, setBlogs] = useState([])
	
	//略

	return (
		<div>
			{/*略*/}

			{user && <BlogList blogs={blogs} setBlogs={setBlogs} />}
		</div>
	)
}

export default App;

↑のBlogListというのが一覧です。中身はこうなっています

const BlogList = ({ blogs, setBlogs}) => {
	return (
		<ul className="blog_ul">
			{blogs.map(blog =>
				<Blog key={blog.id} blog={blog} blogList={blogs} setBlogs={setBlogs} />
			)}
		</ul>
	)
}

Appコンポーネントからblogsステートとblogsを更新するためのsetBlogsをpropsとして受け取り、さらにリスト要素のBlogコンポーネントに渡しています。こういうバケツリレーをやっていいのかやるべきでないのか正直自信ないですが、とりあえずこうなってます。
Blogコンポーネントの中身は以下の通りです。

const Blog = ({blog, blogList, setBlogs}) => {
	const [showDetail, setShowDetail] = useState(false)

	const toggleDetail = () => {
		setShowDetail(!showDetail)
	}

	const incrementLike = async blog => {
		const currentBlogList = blogList
		const targetBlogId = blog.id
		const targetBlogIndex = currentBlogList.findIndex(blog => blog.id === targetBlogId)

		blog.likes = blog.likes + 1
		const updatedBlog = await blogService.like(blog)

		currentBlogList[targetBlogIndex] = updatedBlog
		setBlogs(currentBlogList)
	}

	const blogBrief = () => (
		<>
			{blog.title} {blog.author}
			<button onClick={toggleDetail}>view</button>
		</>
	)

	const blogDetail = () => (
		<>
			{blog.title} <button onClick={toggleDetail}>hide</button><br />
			{blog.url}<br />
			likes {blog.likes} <button onClick={() => incrementLike(blog)}>like</button><br />
			{blog.author}<br />
		</>
	)

	return (
		<li className="blog_style">
			{showDetail ? blogDetail() : blogBrief()}
		</li>
	)
}

色々書いてありますが、今回問題が起こったのは incrementLike の関数でした。
この関数はblogのlikeの値をインクリメントする関数で、画面上だと "like" のボタンをクリックすることで発火します。
サーバーから更新されたblogオブジェクトが返ってきたらblogList内の該当する要素と置き換えて、setBlogs関数にその配列を渡します。そうすることでblogsが更新されて画面がre-renderされ、画面上のlikeの数が変わるというわけです。

likeボタンを押すと確かにlikeの値はしっかり変更されるのですが、画面上ではlikeの数はそのままでした。
つまり、re-renderされていませんでした。

一旦デバッグしてみる

とりあえずconsole.logしまくります。

const incrementLike = async blog => {
	const currentBlogList = blogList
	console.log('current blogs:',currentBlogList)
	const targetBlogId = blog.id
	console.log('target blog id:',targetBlogId)
	const targetBlogIndex = currentBlogList.findIndex(blog => blog.id === targetBlogId)
	console.log('targ blog index:', targetBlogIndex)

	blog.likes = blog.likes + 1
	const updatedBlog = await blogService.like(blog)
	console.log('updated blog:',updatedBlog)

	currentBlogList[targetBlogIndex] = updatedBlog
	setBlogs(currentBlogList)
}

で、この要素を更新してみます

現在likesの値は6なので、一度likeをクリックすれば7になるはずです。

↓

ちゃんと7になってます。
ただ、なんか元の配列内の要素も同じく更新されてしまっています。参照渡しになってるっぽい?
意図していた挙動ではなかったので一旦Arrayでググってみる。

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

ArrayはObjectらしいです。

Objectということは参照渡しです。つまり、BlogコンポーネントのincrementLikeでcurrentBlogListを更新するということは、もとを辿ってゆくとAppコンポーネントのblogsを更新しているのと同じということです。
ただ、同じ値であったとしてもblogsを更新するsetBlogsに値を渡しているのだからre-renderされるのでは? という考えが払拭できなかったので、とりあえず公式ドキュメントを読み直してみました。

同じ値で更新を行った場合re-renderされない

現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します（React は Object.is による比較アルゴリズムを使用します）。

らしいです。
つまり

const incrementLike = async blog => {
	const currentBlogList = blogList
	console.log('current blogs:',currentBlogList)
	const targetBlogId = blog.id
	console.log('target blog id:',targetBlogId)
	const targetBlogIndex = currentBlogList.findIndex(blog => blog.id === targetBlogId)
	console.log('targ blog index:', targetBlogIndex)

	blog.likes = blog.likes + 1
	const updatedBlog = await blogService.like(blog)
	console.log('updated blog:',updatedBlog)

	currentBlogList[targetBlogIndex] = updatedBlog
	console.log('are blogList and currentBloglist the same object?:', Object.is(blogList, currentBlogList))
	setBlogs(currentBlogList)
}

↓

こういうことなので画面はそのままだったということのようです。

修正

const incrementLike = async blog => {
	const currentBlogList = [...blogList]
	const targetBlogId = blog.id
	const targetBlogIndex = currentBlogList.findIndex(blog => blog.id === targetBlogId)

	blog.likes = blog.likes + 1
	const updatedBlog = await blogService.like(blog)

	currentBlogList[targetBlogIndex] = updatedBlog
	setBlogs(currentBlogList)
}