React Hooks の依存リストのオブジェクトの比較について - Qiita

はじめに React Hooks において、useMemo や useEffect などの第二引数の依存リストに、オブジェクトを指定した場合の動作について、混乱を招くことが多くあったので、まとめてみました。 サンプルプログラムは、以下で実行可能です。 どういう場合？ 以下のプログラムでは、初期表示時と counter1 ボタンがクリックされた場合のみ、メッセージを更新する という仕様なのですが、実際には仕様通りには動きません。 import { useState, useCallback, useEffect } from "react"; const useCounter = () => { const [count, setCount] = useState(0); const countUp = useCallback(() => setCount(count + 1), [coun

[carolina04]

useCounter の結果をメモ化する と 分割代入を使う の両方を採用するのが良いのではないかと思っています。