useEffectOnce()
Just modified version of useEffect
that's executed only one time, at the mounting time.
See also:
useUpdateEffect()
: Inverse ofuseEffectOne()
useIsFirstRender()
: Return aboolean
useIsMounted()
: Callback function to avoid Promise execution after component un-mount
The Hook
1import { EffectCallback, useEffect, useRef } from 'react'23function useEffectOnce(effect: EffectCallback) {4 // eslint-disable-next-line @typescript-eslint/no-explicit-any5 const destroyFunc = useRef<void | any>()6 const calledOnce = useRef(false)7 const renderAfterCalled = useRef(false)89 if (calledOnce.current) {10 renderAfterCalled.current = true11 }1213 useEffect(() => {14 if (calledOnce.current) {15 return16 }1718 calledOnce.current = true19 destroyFunc.current = effect()2021 return () => {22 if (!renderAfterCalled.current) {23 return24 }2526 if (destroyFunc.current) {27 destroyFunc.current()28 }29 }30 // eslint-disable-next-line react-hooks/exhaustive-deps31 }, [])32}3334export default useEffectOnce
Usage
1import React, { useEffect, useState } from 'react'23import { useEffectOnce } 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 useEffectOnce(() => {12 console.log('Triggered only once, on mount', { data })13 })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 »