Lifecycle & Effects

useDidMount

Fires a callback once when the component mounts.

About

componentDidMount hook for React

Examples

Run setup code once

import { useDidMount } from "rooks";

export default function App() {
  useDidMount(function () {
    console.log("mounted");
  });

  return null;
}

Set state after the component mounts

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

export default function MountedMessage() {
  const [message, setMessage] = useState("Preparing…");

  useDidMount(() => {
    setMessage("Ready");
  });

  return <div>{message}</div>;
}

Arguments

Argument	Type	Description
callback	function	function to be called on mount

useDeepCompareEffect

Runs an effect only when dependencies change via deep equality comparison.

useDidUpdate

Fires a callback on every update, skipping the initial mount.