useDidUpdate
Runs a callback after updates while skipping the initial mount.
About
useDidUpdate runs an effect callback after updates but not after the initial render. Supply dependencies to limit updates, or omit them to run after every committed rerender.
Examples
import { useState } from "react";
import { useDidUpdate } from "rooks";
export default function UpdateStatus() {
const [count, setCount] = useState(0);
const [message, setMessage] = useState("Not updated yet");
useDidUpdate(() => setMessage(`Count changed to ${count}`), [count]);
return (
<section>
<p role="status">{message}</p>
<button type="button" onClick={() => setCount((value) => value + 1)}>
Count: {count}
</button>
</section>
);
}Parameters
| Argument | Type | Default | Meaning |
|---|---|---|---|
callback | () => void | required | Runs after an eligible update. |
conditions | unknown[] | undefined | Uses React dependency comparison; omitted means every update. |
An empty array makes the hook a no-op and emits a warning. Although the implementation wraps a non-array runtime value in an array, TypeScript callers should pass an array.
Return value
The hook returns void; callback return values are ignored.
Behavior and lifecycle
A mount flag is set by a separate mount effect. The update effect skips its first pass, then calls the render's callback after matching updates. The flag is reset on unmount. There is no cleanup callback. React Strict Mode development replay can affect lifecycle observations, so do not use this hook as an exactly-once transaction boundary.
Compatibility and accessibility
No browser API is required. Effects do not run on the server. Keep update-triggered focus, announcements, and network work intentional; the hook itself adds no accessibility behavior.