Like useEffect but skips the first render. Handy for syncing with external state after mount.
import { useEffect, useRef } from 'react';
export function useUpdateEffect(
effect: React.EffectCallback,
deps: React.DependencyList
): void {
const isFirst = useRef(true);
useEffect(() => {
if (isFirst.current) {
isFirst.current = false;
return;
}
return effect();
}, deps);
}Same API as useEffect, but the effect does not run on the first render. Use when you only want to react to changes, not initial value.
Sync to external store or analytics when a prop changes, but not on mount.
useUpdateEffect(() => { track('filter', filter); }, [filter]);