리액트, useEffect 첫 렌더링때 함수실행 막기

useDidMountEffect.js

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
	const didMount = useRef(false);

	useEffect(() => {
		if (didMount.current) func();
		else didMount.current = true;
	}, deps);
};

export default useDidMountEffect;

 

활용

import useDidMountEffect from 'components/useDidmountEffect.js';

useDidMountEffect(() => {
	bgBlinking();
}, [siteState]);
   

 

 

useEffect 를 사용하는 이유 중 하나는,

특정 state가 변하는 경우에 함수를 호출하고자 할 때 사용한다.

하지만 첫 렌더링때도 state가 설정되는 것으로 보고 useEffect가 실행될 때가 있다. 

 

커스텀 Hook을 만들어서 이 문제를 해결하였다

 

출처

stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render/63776262#63776262