useUpdateEffect hook

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);
}

How to use

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]);

Back to Snippets

useUpdateEffect hook

Like useEffect but skips the first render. Handy for syncing with external state after mount.

X LinkedIn

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);
}

How to use

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]);