useThrottleEffect

Runs an effect at throttled intervals for dependency changes.

Import

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

Live demo

Basic demo

Runs an effect at throttled intervals for dependency changes.

Throttled effect runs: 0

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

export default function UseThrottleEffectDemo() {
  const [query, setQuery] = useState('')
  const [runs, setRuns] = useState(0)

  useThrottleEffect(() => {
    if (query) setRuns((value) => value + 1)
  }, [query], { wait: 500 })

  return (
    <div>
      <input value={query} onInput={(event) => setQuery(event.currentTarget.value)} placeholder="Type quickly" />
      <p><strong>Throttled effect runs:</strong> {runs}</p>
    </div>
  )
}

API

TypeScript signature

import type { DependencyList, EffectCallback } from '../utils/types-compat.js';
import type { ThrottleOptions } from '../useThrottle/throttleOptions.js';
declare function useThrottleEffect(effect: EffectCallback, deps?: DependencyList, options?: ThrottleOptions): void;
export default useThrottleEffect;
/

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.