Lifecycle & Effects
useDidUpdate
Fires a callback on every update, skipping the initial mount.
About
componentDidUpdate hook for react
Examples
React to any update after mount
import React, { useState } from "react";
import { useDidUpdate } from "rooks";
export default function App() {
const [value, setValue] = useState(0);
useDidUpdate(() => {
console.log("This message was logged on update.");
});
return (
<div>
<p> Update this value by clicking on the button</p>
<p> Current value is {value}</p>
<p> Open the sandbox in codesandbox to view the console </p>
<button onClick={() => setValue(value + 1)}>Increment</button>
</div>
);
}React only when a specific dependency changes
import { useState } from "react";
import { useDidUpdate } from "rooks";
export default function FilterStatus() {
const [filter, setFilter] = useState("all");
const [count, setCount] = useState(0);
const [message, setMessage] = useState("No updates yet");
useDidUpdate(() => {
setMessage(`Filter changed to ${filter}`);
}, [filter]);
return (
<div>
<button onClick={() => setFilter("active")}>Set active filter</button>
<button onClick={() => setCount((current) => current + 1)}>
Increment unrelated count
</button>
<p>Count: {count}</p>
<p>{message}</p>
</div>
);
}