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 } from 'react'23function useEffectOnce(effect: EffectCallback) {4 // eslint-disable-next-line react-hooks/exhaustive-deps5 useEffect(effect, [])6}78export 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 »