20211211 TIL

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

条件空の依存

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>
)

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

n/a.結論