为什么在使用use-callback-ref的useCallbackRef时调用两次useEffect

Question

useCallbackRef是use-callback-ref包提供的钩子

为什么useEffect触发两次时，有在依赖数组的useCallbackRef结果的.current?

import { useCallback, useEffect, useRef, useState } from "react";
import { useCallbackRef } from "use-callback-ref";
function App() {
const [useCbRefCounter, setUseCbRefCounter] = useState(0);
const [useCbRefEffectCounter, setUseCbRefEffectCounter] = useState(0);

const divCbRef = useCallbackRef(null, () =>
// This is called once
setUseCbRefCounter((counter) => counter + 1)
);
useEffect(() => {
if(!divCbRef.current) {
return;
}
// This is called twice
setUseCbRefEffectCounter((counter) => counter + 1);
}, [divCbRef.current]);

// ...
}

(useEffect不是被null触发的)

沙盒演示，比较ref改变时调用的次数

Answer 1

这很可能是由于useCallbackRef的实现，
divCbRef.current是一个可变对象，因此在useEffect内部，两个调用是相同的。

但是对useEffect的调用发生了两次，因为第一次divCbRef.current是null，第二次是HTMLDivElement。

如果你稍微改变useEffect的代码，那么你就会明白为什么这个效果被称为:

const currentREF = divCbRef.current;
useEffect(() => {
if (!divCbRef.current) {
return;
}
console.log(currentREF);
// This is called twice
setUseCbRefEffectCounter((counter) => counter + 1);
}, [currentREF]);

控制台输出将是

null
<div> </div>