sometimes we need to care screen itself rather than intersectionObserver.

useScreenEffect.ts

import * as React from 'react';

export function useScreenEffect(handler: () => void, deps: ReadonlyArray<any>) {
  React.useLayoutEffect(() => {
    const enhancedHandler = debounceToNextAnimationFrame(handler);
    window.addEventListener("scroll", enhancedHandler, canUsePassive && { passive: true });
    window.addEventListener("resize", enhancedHandler, canUsePassive && { passive: true });
    enhancedHandler();

    return () => {
      window.removeEventListener("scroll", enhancedHandler);
      window.removeEventListener("resize", enhancedHandler);
    };
    // eslint-disable-next-line
  }, deps);
}
  
let canUsePassive = false;

try {
  (window as any).addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get() {
        canUsePassive = true;
        return true;
      },
    })
  );
} catch {}

function debounceToNextAnimationFrame<T extends Function>(handler: T): T {
  let handling = false;
  return ((...args: any[]) => {
    if (handling) {
      return;
    }
    handling = true;
    requestAnimationFrame(() => {
      try {
        handler(...args);
      } finally {
        handling = false;
      }
    });
  }) as any;
}