Rooks
HooksLifecycle & Effects

useDidMount

Runs a callback from an effect when a component mounts.

About

useDidMount is a small useEffect wrapper for one-time setup that does not need cleanup.

Examples

import { useState } from "react";
import { useDidMount } from "rooks";

export default function MountStatus() {
  const [status, setStatus] = useState("Rendering");
  useDidMount(() => setStatus("Mounted"));
  return <p role="status">{status}</p>;
}

Parameters

callback: () => void is required. The callback captured by the first render runs after the component commits.

Return value

The hook returns void. A value returned by callback is ignored; use useEffect or pair setup with useWillUnmount when cleanup is required.

Behavior and lifecycle

The hook uses an empty dependency array. Ordinary rerenders do not invoke the callback again. A real unmount followed by a new mount creates a new hook instance and runs it again. React Strict Mode may replay mount effects in development, so the callback must be safe to run more than once.

Compatibility and accessibility

No browser API is required, and the callback is skipped during server rendering. If mount work changes user-visible status, expose the result through semantic content or a live region.

On this page