useEffectOnce


Just modified version of useEffect that's executed only one time, at the mounting time.

See also:

Usage

import { useEffect, useState } from 'react'

import { useEffectOnce } from 'reactchemy'

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

   useEffectOnce(() => {
      console.log('Triggered only once, on mount', { data })
   })

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

Hook

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

export function useEffectOnce(effect: EffectCallback) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, [])
}