Rooks
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>
  );
}

On this page