useEffectOnce()

1import { EffectCallback, useEffect } from 'react'
2
3function useEffectOnce(effect: EffectCallback) {
4  // eslint-disable-next-line react-hooks/exhaustive-deps
5  useEffect(effect, [])
6}
7
8export default useEffectOnce

1import { useEffect, useState } from 'react'
2
3import { useEffectOnce } from 'usehooks-ts'
4
5export default function Component() {
6  const [data, setData] = useState<number>(0)
7  useEffect(() => {
8    console.log('Normal useEffect', { data })
9  }, [data])
10
11  useEffectOnce(() => {
12    console.log('Triggered only once, on mount', { data })
13  })
14
15  return (
16    <div>
17      <p>Open your console</p>
18      <button onClick={() => setData(Date.now())}>Update data</button>
19    </div>
20  )
21}