useUpdateEffect()
Just modified version of useEffect
that is skipping the first render.
See also:
useEffectOnce()
: Inverse ofuseUpdateEffect()
useIsFirstRender()
: Return aboolean
useIsMounted()
: Callback function to avoid Promise execution after component un-mount
The Hook
1import { DependencyList, EffectCallback, useEffect } from 'react'23import { useIsFirstRender } from 'usehooks-ts'45function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {6 const isFirst = useIsFirstRender()78 useEffect(() => {9 if (!isFirst) {10 return effect()11 }12 // eslint-disable-next-line react-hooks/exhaustive-deps13 }, deps)14}1516export default useUpdateEffect
Usage
1import { useEffect, useState } from 'react'23import { useUpdateEffect } from 'usehooks-ts'45export default function Component() {6 const [data, setData] = useState<number>(0)7 useEffect(() => {8 console.log('Normal useEffect', { data })9 }, [data])1011 useUpdateEffect(() => {12 console.log('Update useEffect only', { data })13 }, [data])1415 return (16 <div>17 <p>Open your console</p>18 <button onClick={() => setData(Date.now())}>Update data</button>19 </div>20 )21}
See a way to make this page better?
Edit there »