useUpdateEffect

Skips the first effect run and only reacts to updates.

Import

import { useUpdateEffect } from '@kamod-ch/hooks'

Live demo

Basic demo

Skips the first effect run and only reacts to updates.

Value: 0

Effect runs after mount: 0

import { useState } from 'preact/hooks'
import { useUpdateEffect } from '@kamod-ch/hooks'

export default function UseUpdateEffectDemo() {
  const [value, setValue] = useState(0)
  const [runs, setRuns] = useState(0)

  useUpdateEffect(() => {
    setRuns((count) => count + 1)
  }, [value])

  return (
    <div>
      <p><strong>Value:</strong> {value}</p>
      <p><strong>Effect runs after mount:</strong> {runs}</p>
      <button type="button" onClick={() => setValue((count) => count + 1)}>Increment</button>
    </div>
  )
}

API

TypeScript signature

import { useEffect } from 'preact/hooks';
declare const _default: typeof useEffect | typeof import("preact/hooks").useLayoutEffect;
export default _default;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.