😛

react strict mode での useEffect の2回実行を避ける

2022/09/17に公開

react strict mode で useEffect が2回走る問題についての回避方法。

参考:
https://www.sunapro.com/react18-strict-mode/#index_id5

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

ログインするとコメントできます