useUpdateEffect()

The useUpdateEffect() hook is a drop-in replacement for useEffect that ignores the initial render. It only executes the effect when the component updates and its dependencies change.

Import

typescript

import { useUpdateEffect } from 'the-react-hooks';

Usage

Open your console or watch the monitor below.
useUpdateEffect ignored the initial mount.

Activity Monitor

Waiting for updates...

Component.tsx

import { useUpdateEffect } from 'the-react-hooks';
import { useState } from 'react';

export const Component = () => {
  const [count, setCount] = useState(0);

  useUpdateEffect(() => {
    console.log('Count updated to:', count);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment
    </button>
  );
}

API

Arguments

effect – EffectCallback The function to execute on updates.
deps – DependencyList (Optional) An array of dependencies that trigger the effect.

Returns

This hook returns void.

PrevioususeUnmount NextuseWhyDidYouUpdate