Skip to content

useBeforeUpdate

useBeforeUpdate is a React equivalent adaptation of Vue's onBeforeUpdate, which skips the initial mount and only triggers before dependencies are updated.

Basic Usage

This hook is suitable for placing logic that needs to run "before a change is committed", such as recording old values or performing pre-update validation.

tsx
useBeforeUpdate(() => {
  console.log('before update');

  return () => {
    console.log('cleanup before next update / unmount');
  };
}, [count, status]);

It triggers when count or status changes; the cleanup function will run before the next trigger or on unmount.

API

ts
function useBeforeUpdate(fn: EffectCallback, deps?: DependencyList): void;

Notes

  • It does not execute on the initial mount.
  • Based on useLayoutEffect, it fires earlier than useEffect.
  • A cleanup function can be returned.

Released under the MIT License