useComponentDidUpdate

useEffect와는 다르게 처음 state가 선언됐을 때는 함수를 실행하지 않고, 이후 state가 변경되었을 때만 함수를 실행하도록 하는 훅스입니다.

Copy Code

hooks/use-component-did-update.tsx
'use client'
 
import { useEffect, useRef } from 'react'
 
function useComponentDidUpdate(cb: Function, state: any) {
  const mounted = useRef(false)
 
  useEffect(() => {
    if (mounted.current) {
      cb()
    } else {
      mounted.current = true
    }
  }, [state, cb])
}
 
export default useComponentDidUpdate

Usage

useComponentDidUpdate(() => {
  console.log(1)
}, [value])