useIsFirstRender()
Simple React hook that return a boolean;
- True at the mount time
- Then always false
See also:
useEffectOnce()
: A modifieduseEffect()
executed only on mountuseUpdateEffect()
: A modifieduseEffect()
executed only on updates (skip first render)useIsMounted()
: Callback function to avoid Promise execution after component un-mount
The Hook
1import { useRef } from 'react'23function useIsFirstRender(): boolean {4 const isFirst = useRef(true)56 if (isFirst.current) {7 isFirst.current = false89 return true10 }1112 return isFirst.current13}1415export default useIsFirstRender
Usage
1import { useEffect, useState } from 'react'23import { useIsFirstRender } from 'usehooks-ts'45export default function Component() {6 const isFirst = useIsFirstRender()7 const [data, setData] = useState<number>(0)89 useEffect(() => {10 console.log('Normal useEffect', { data })11 }, [data])1213 return (14 <div>15 <p>Open your console</p>16 <p>Is first render: {isFirst ? 'yes' : 'no'}</p>17 <button onClick={() => setData(Date.now())}>Update data</button>18 </div>19 )20}
See a way to make this page better?
Edit there »