useUpdateEffect


Just modified version of useEffect that is skipping the first render.

See also:

Usage

import { useEffect, useState } from 'react'

import { useUpdateEffect } from 'reactchemy'

export default function Component() {
   const [data, setData] = useState<number>(0)
   useEffect(() => {
      console.log('Normal useEffect', { data })
   }, [data])

   useUpdateEffect(() => {
      console.log('Update useEffect only', { data })
   }, [data])

   return (
    <div>
      <p>Open your console</p>
      <button onClick={() => setData(Date.now())}>Update data</button>
    </div>
   )
}

Hook

import type { DependencyList, EffectCallback } from 'react'
import { useEffect } from 'react'

import { useIsFirstRender } from 'reactchemy'

export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
   const isFirst = useIsFirstRender()

   useEffect(() => {
      if (!isFirst)
         return effect()

      // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps)
}