Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: memoize onLoadMore callback in useLoadMoreOnIntersect hook for improved performance
1import { useIntersectionObserver } from "@uidotdev/usehooks";
2import { useCallback, useEffect, useRef } from "react";
3
4const useLoadMoreOnIntersect = (onLoadMore: () => void) => {
5 const [ref, entry] = useIntersectionObserver({
6 root: null,
7 rootMargin: "0px",
8 threshold: 0
9 });
10
11 const wasIntersecting = useRef(false);
12 const memoizedOnLoadMore = useCallback(onLoadMore, [onLoadMore]);
13
14 useEffect(() => {
15 const isIntersecting = entry?.isIntersecting ?? false;
16
17 if (isIntersecting && !wasIntersecting.current) {
18 memoizedOnLoadMore();
19 }
20
21 wasIntersecting.current = isIntersecting;
22 }, [entry?.isIntersecting, memoizedOnLoadMore]);
23
24 return ref;
25};
26
27export default useLoadMoreOnIntersect;