use-on-unmount (use-on-unmount)

Execute a function only once when the component is unmounted.

v0.1.0

Usage

import { use-on-unmount } from "@/hooks"

"use client";

import React, { useState } from "react";

import { toast } from "sonner";

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

import { useOnUnmount } from "@/components/hooks/use-on-unmount";

function ChildComponent() {
  useOnUnmount(() => {
    toast.success("Component unmounted successfully!");
  });

  return (
    <div className="p-4 rounded-md bg-muted">
      <p>I am the child component. Click to unmount me!</p>
    </div>
  );
}

export function UseOnUnmountDemo() {
  const [showChild, setShowChild] = useState(true);

  return (
    <Card className="relative max-w-md w-full">
      <CardHeader>
        <CardTitle>useOnUnmount</CardTitle>
        <CardDescription>
          This example uses the <code>useOnMount</code> hook to execute a
          function only once when the component is mounted.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Button onClick={() => setShowChild((prev) => !prev)}>
          {showChild ? "Unmount child component" : "Mount child component"}
        </Button>
        <div className="mt-6 min-h-[60px]">
          {showChild && <ChildComponent />}
        </div>
      </CardContent>
      <CardFooter>
        <p className="text-muted-foreground text-sm">
          When the child component is unmounted, a toast will be displayed using
          shadcn/ui.
        </p>
      </CardFooter>
    </Card>
  );
}

Install

npx wkkkis-hooks add use-on-unmount

Options

Name	Type	Default	Description
callback	void function	() => {}	The function to execute when the component is unmounted.

Execution Timing

The callback is executed only once, immediately before the component is unmounted (on the client).
The callback will not run on re-renders or updates, only on unmount.

Callback Stability

The callback is not re-invoked if it changes between renders; only the initial callback is used.
For best results, use a stable callback (e.g., from useCallback ) if it depends on props or state.

SSR & Client-Only

The hook is client-side only; on the server, the callback is never called.

Best Practices & Caveats

Use for cleanup logic, analytics, or side effects that should only run once on unmount.
Avoid side effects that depend on up-to-date props or state unless the callback is stable.

Files in this hook

Source	Destination
files/use-on-unmount.ts	src/hooks/use-on-unmount.ts