useEffectOnce()

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

See also:

The Hook

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

Usage

1import React, { 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}

Edit on CodeSandbox

See a way to make this page better?
Edit there »