😛
react strict mode での useEffect の2回実行を避ける
react strict mode で useEffect が2回走る問題についての回避方法。
参考:
useRef を利用する。
こんな感じの hooks を作った
import { useEffect, useRef } from "react";
export const useOneTimeMountEffect = (functionOnMount:() => void) => {
const didLogRef = useRef(false);
return useEffect(() => {
if(didLogRef.current === false){
didLogRef.current = true;
functionOnMount();
}
},[]);
}
で、こんな感じで利用
useOneTimeMountEffect(() => {
console.log('one_time');
})
Discussion