useIdle

useIdle.ts

const idleRequests: Array<() => void> = [];
let idleCallbackRequested = false;

function idleCallback() {
  idleCallbackRequested = false;

  const reqs = idleRequests.splice(0, 200);
  for (const req of reqs) {
    req();
  }

  if (idleRequests.length !== 0) {
    requestBatchedIdleCallback();
  }
}

function requestBatchedIdleCallback() {
  if (idleCallbackRequested) return;
  idleCallbackRequested = true;

  // @ts-expect-error
  requestIdleCallback(idleCallback, { timeout: 250 });
}

function useIdle() {
  const [ready, setReady] = useState(false);

  useLayoutEffect(() => {
    function request() {
      setReady(true);
    }

    idleRequests.push(request);
    requestBatchedIdleCallback();

    return () => {
      const idx = idleRequests.indexOf(request);
      if (idx !== -1) {
        idleRequests.splice(idx, 1);
      }
    };
  }, []);

  return ready;
}