console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

import { useState, useEffect, RefObject } from 'react';

export const useVisible = (
  ref: RefObject<HTMLDivElement>,
  options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  }
) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    const { current: elementRef } = ref;
    
    if (elementRef) {
      const observer = new IntersectionObserver(
        ([entry]) => setIsVisible(entry.isIntersecting), options
      );

      observer.observe(elementRef);

      return () => observer.unobserve(elementRef);
    }
  }, [ref, options]);

  return isVisible;
};

import { useEffect, useState } from "react";

export const usePageVisibility = () => {
  const [pageVisible, setPageVisible] = useState<boolean>(true);

  useEffect(() => {
    const handleVisibilityChange = () => {
      const isPageVisible = document.visibilityState === "visible";
      setPageVisible(isPageVisible);
	};

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

  return pageVisible;
};

import { useEffect, useCallback, useRef } from 'react';

export const useWakeLock = (shouldWakeLock = false) => {
  let sentinel = useRef<WakeLockSentinel | null>(null);

  const requestWakeLockSentinel = useCallback(async () => {
    sentinel.current = await navigator.wakeLock.request('screen');
  }, []);

  const releaseWakeLockSentinel = useCallback(async () => {
    await sentinel.current?.release();
    sentinel.current = null;
  }, []);

  useEffect(() => {
    (async () => {
      if (shouldWakeLock) {
        await requestWakeLockSentinel();

        return releaseWakeLockSentinel;
      }

      await releaseWakeLockSentinel();
    })();
  }, [shouldWakeLock, requestWakeLockSentinel, releaseWakeLockSentinel]);

  return { isWakeLock: !!sentinel.current };
};