`useEffectOnce` for React v18 (TypeScript)

readme.md

Inspired from this blog post. If you want to change return type from void to unknown, be my guest.

useEffectOnce.ts

import { useEffect, useInsertionEffect, useRef } from "react";

const useEffectOnce = (effect: () => void | (() => void)) => {
  const isEffectAlreadyCalledRef = useRef(false);
  const isActualUnmountRef = useRef(false);
  const cleanupRef = useRef(() => {});

  useInsertionEffect(() => {
    return () => {
      isActualUnmountRef.current = true;
    };
  }, []);

  useEffect(() => {
    if (!isEffectAlreadyCalledRef.current) {
      isEffectAlreadyCalledRef.current = true;
      let cleanup = effect();
      if (typeof cleanup === "function") {
        cleanupRef.current = cleanup;
      }
    }

    return () => {
      if (isActualUnmountRef.current) {
        cleanupRef.current();
      }
    };
  }, []);
};