A custom hook to run a callback on react component first render without any dependency issue

useComponentFirstRender.tsx

import { useEffect, useState } from "react";

/**
 * This hook runs a callback when a component is mounted.
 */
export const useComponentFirstRender = (callback: Function) => {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    if (isMounted) {
      console.log("Component mounted!");
      callback();
    } else {
      setIsMounted(true);
    }
  }, [isMounted, callback]);
}

// example of use

export const MyComponent = () => {
  useComponentFirstRender(() => {
    someExpensiveFunction();
    // you can set state or do anything here, it doesnt matter.
  });

  return <p>My cool component </p>
}