useUpdateEffect

react 의 useEffect 는 처음 마운트할때와 의존성 배열에 있는 값이 바뀔 때 실행된다. 

 

useUpdateEffect 는 react-use 같은 라이브러리에서 커스텀 훅으로 제공되기도 하지만 
간단하게 프로젝트에 정의해서 사용할 수도 있다.

import { useEffect, useRef } from 'react'

function useUpdateEffect(callback: () => void, deps: any[]) {
    const ref = useRef(false)

    useEffect(() => {
        if (ref.current) {
            callback()
        } else {
            ref.current = true
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [...deps])
}

export default useUpdateEffect

 

useUpdateEffect 는 처음 마운트시에 useEffect 가 실행되지않고 의존성 배열에 의해서만 리렌더가 필요할 때 사용할 수 있는 커스텀 훅이다.

 

ref 가 첫 마운트시에는 false 이기 때문에 콜백이 실행되지 않고 이후 deps 가 변경이 일어날 때만 useEffect 가 실행 되게 된다.