Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn effect that skips the first run and fires only when its dependencies change afterwards, to react to changes and not to the initial value.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to react to a change in a prop or state, such as saving after an edit, scrolling to top after a filter change or announcing a new count, without also running on mount.
Do not use it to sync state from props (derive it during render instead), and do not rely on it under Strict Mode to run once: it skips the first real commit only.
import { useUpdateEffect } from "@/hooks/use-update-effect"useUpdateEffect(() => {
announce(`${results.length} results`)
}, [results.length])useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void
| Name | Type | Description |
|---|---|---|
effect | EffectCallback | Runs after every dependency change except the first render. Its cleanup runs as usual. |
deps | DependencyList | Same as useEffect. With no list it runs after every update. |
A hook has no markup. It is handy for announcing a change to a live region only after it happens, so screen readers do not read the initial state twice.
The hook ships with renderHook tests (use-update-effect.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.