React hook to track whether an element is on the screen

__mocks__use-pagination-trigger.ts

import "jest";
import React from "react";

let externalSetShouldLoadMore = null;

export const usePaginationTrigger = () => {
  const [shouldLoadMore, setShouldLoadMore] = React.useState(false);

  externalSetShouldLoadMore = setShouldLoadMore;

  return shouldLoadMore;
};

export const triggerPagination = () => {
  if (externalSetShouldLoadMore) {
    externalSetShouldLoadMore(true);
    setTimeout(() => {
      externalSetShouldLoadMore(false);
    });
  }
};

usage-in-tests.ts

//then in tests you do something like:

import { triggerPagination } from "../../hooks/use-pagination-trigger";


...

act(() => {
  triggerPagination();
});

...

use-pagination-trigger.ts

import React from "react";

export const usePaginationTrigger = (
  ref: React.MutableRefObject<undefined>
) => {
  const [shouldLoadMore, setShouldLoadMore] = React.useState(false);

  React.useEffect(() => {
    let observer: IntersectionObserver | null = null;
    observer = new IntersectionObserver(([entry]) =>
      setShouldLoadMore(entry.isIntersecting)
    );

    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return shouldLoadMore;
};