January 28, 2021
Prevent an effect from firing at mount
Recently I have been encountering a lot of cases where I wanted to have an effect fire when a variable changes, but not when the component mounts, similar to how componentDidUpdate
behaves. I created this handy helper hook which I've since used in a lot of places:
import React from 'react'
// A useEffect that doesn't fire at the first render
export const useSubsequentEffect = (fn, deps) => {
const isMountedRef = React.useRef(false)
React.useEffect(() => {
if (!isMountedRef.current) {
isMountedRef.current = true
return
}
return fn()
}, deps)
}
Use it as you would normally use an effect.