---
title: "useUpdateEffect – Effect Hook Usage & Examples"
description: "React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the `useEffect` hook. pract"
canonical: https://reactuse.com/effect/useupdateeffect/
---

# useUpdateEffect

React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the same as the `useEffect` hook

`useUpdateEffect` works identically to `useEffect` except that it skips the initial execution on mount. The effect only fires on subsequent dependency changes, making it useful when you want to react to updates but not to the initial render. It uses `useFirstMountState` internally to detect and skip the first invocation.

### When to Use

- Running a side effect only when a value changes after the initial render (e.g., syncing a form field to an API only on updates, not on mount)
- Showing a "value changed" notification without triggering it when the component first appears
- Skipping initial data fetches when the component already has default or cached data

### Notes

- **Same signature**: Accepts an effect callback and optional dependency array, identical to `useEffect`. Supports cleanup functions via the return value.
- **First-mount detection**: Uses `useFirstMountState` internally, which tracks mount status via a ref.
- See also `useUpdateLayoutEffect` for the same skip-first-run behavior using `useLayoutEffect` timing, and `useDeepCompareEffect` for deep dependency comparison.

## Usage

```tsx live
function Demo() {
  const [count, setCount] = useState(0);
  const [effectCount, setEffectCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);

  useEffect(() => {
    setEffectCount(c => c + 1);
  }, [count]);

  useUpdateEffect(() => {
    setUpdateEffectCount(c => c + 1);
    return () => {
      // do something
    };
  }, [count]); // you can include deps array if necessary

  return (
    <div>
      <p>effectCount: {effectCount}</p>
      <p>updateEffectCount: {updateEffectCount}</p>
      <p>
        <button type="button" onClick={() => setCount(c => c + 1)}>
          reRender
        </button>
      </p>
    </div>
  );
};

```

%%API%%