Sometimes you want to use useEffect() to catch a change in a state, but only after the initial value has been set. For example, you have a state called selectedId, and you want to do something when the value changes.<\/p>\n
You may have defined the state as follows, with an initial value:<\/p>\n
const [selectedId, setSelectedId] = useState<number>(0);\n<\/code><\/pre>\nTo act on changes to selectedId, you configured a useEffect() statement as follows:<\/p>\n
useEffect(() => {\n console.log(`selectedId has changed to ${selectedId}. Or the initial value is being set.)`);\n}, [selectedId]);\n<\/code><\/pre>\nThis works fine for most cases, but the effect fires on every change as well as when the state is being set to its initial value.
\nWhat if we only want to detect changes after<\/em> the initial value is set?<\/p>\nInstead of useEffect(), we can use a custom hook:<\/p>\n
function useDidUpdateEffect(fn, inputs) {\n const isMountingRef = useRef(false);\n\n useEffect(() => {\n isMountingRef.current = true;\n }, []);\n\n useEffect(() => {\n if (!isMountingRef.current) {\n return fn();\n } else {\n isMountingRef.current = false;\n }\n }, inputs);\n}\n\n\/\/ Replace useEffect() with useDidUpdateEffect():\nuseDidUpdateEffect(() => {\n console.log(`selectedId has changed to ${selectedId}. This won't fire when the initial value is being set.`);\n}, [selectedId]);\n<\/code><\/pre>\nTo make it more reusable, I like to add the custom hook in a separate file and import it when needed:<\/p>\n
useDidUpdateEffect.tsx:<\/p>\n
import React, { useEffect, useRef } from \"react\";\n\nexport const useDidUpdateEffect = (fn: any, inputs: React.DependencyList | undefined) => {\n const isMountingRef = useRef(false);\n useEffect(() => {\n isMountingRef.current = true;\n }, []);\n useEffect(() => {\n if (!isMountingRef.current) {\n return fn();\n } else {\n isMountingRef.current = false;\n }\n \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n }, inputs);\n}\n<\/code><\/pre>\nAdd required import statements to myComponent.tsx:<\/p>\n
import { useDidUpdateEffect } from \"hooks\/useDidUpdateEffect\";\n\nuseDidUpdateEffect(() => {\n console.log(`selectedId has changed to ${selectedId}. This won't fire when the initial value is being set.`);\n}, [selectedId]);\n<\/code><\/pre>\n