use-did-update (use-did-update)

Execute a function when the component is updated, but not when it is mounted.

v0.1.0

Usage

import { use-did-update } from "@/hooks"

"use client";

import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { useDidUpdate } from "@/components/hooks/use-did-update";

export function UseDidUpdateDemo() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("");

  useDidUpdate(() => {
    setMessage(`The count was updated to ${count}`);
  }, [count]);

  return (
    <Card className="relative max-w-md w-full">
      <CardHeader>
        <CardTitle>useDidUpdate</CardTitle>
        <CardDescription>
          This example uses the <code>useDidUpdate</code> hook to execute a
          function when the count state is updated.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-col items-center gap-4">
          <p className="text-2xl font-bold">{count}</p>
          <Button onClick={() => setCount((c) => c + 1)}>Increment</Button>
          <p className="text-sm text-muted-foreground mt-2">{message}</p>
        </div>
      </CardContent>
    </Card>
  );
}

Install

npx wkkkis-hooks add use-did-update

Options

Name	Type	Default	Description
callback	void function	() => {}	The function to execute when the component is unmounted.
deps	DependencyList	[]	The dependencies to watch for changes.

Update-Only Execution

The callback is executed only when the dependencies change after the initial mount.
The callback is not called on the initial mount.

Dependency Handling

The deps array works like in useEffect : the callback runs when any dependency changes.
If deps is omitted, the effect will run after every update (except the first mount).

Cleanup

The hook does not provide a built-in cleanup for the callback itself, but you can return a cleanup function from your callback just like in useEffect .

Best Practices & Caveats

The hook is client-side only; on the server, it does not run.
Use for side effects that should only run on updates, not on mount (e.g., reacting to prop or state changes).
If you need to run logic both on mount and update, use useEffect instead.

Files in this hook

Source	Destination
files/use-did-update.ts	src/hooks/use-did-update.ts