20211211 TIL

useCallback dependenciesにstateまたはpropsを入れない場合、どのように操作しますか?

条件空の依存

useCallbackは、コンポーネントの再レンダリング時に再定義されないように、パラメータとしての関数をコメントします.
使用時に関数内で使用するstateを依存項目に入れなければ正常に動作しません.そうであれば、なぜ入れますか?そうすると、依存関係をクリアして、動作させてみました.

const [bool, setBool] = useState(false);
const handlePrint = useCallback(() => console.log(bool), []);
const handleToggle = useCallback(() => setBool((prev) => !prev), []);

return (
  <button onClick={handleToggle}>toggle</button>
  <button onClick={handlePrint}>print</button>
)

以下の手順で操作します.

print button click

toggle button click

print button click

結果は以下の通りです.

false
false

条件空のdep+元のタイプと参照タイプ

今回は、元のタイプ変数と参照タイプ変数を少し追加し、同じ順序で操作します.

const [bool, setBool] = useState(false);
const refVal = [false];
let priVal = false;

const handlePrint = useCallback(() => {
      console.log(bool, refVal[0], priVal);
}, []);
const handleToggle = useCallback(() => {
    setBool((prev) => !prev);
    refVal[0] = true;
    priVal = true;
}, []);

結果は以下の通りです.

/* state, 참조타입, 원시타입 */

false false false
false true true

本物のstateは変わらず、元のタイプと参照タイプの変数値が変わります.

n/a.結論

useCallbackは再定義されないように書かれていますが、stateを依存項目に入れると意味がないのではないでしょうか.
考えて、削除して、結果はとてもでたらめで、不思議な気持ちで記録しました.
原因はまだ深く調査されていないので、最適化作業が一定に終わったら探してみましょう.