Improving infinite scroll search list state management with useInfiniteQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14utils/mergeCarsAndPromos.ts

// Inserts recommended listings between cars in the list (one per 10 cars)
export const mergeCarsAndPromos = (cars: Car[], promoCars: PromoCar[]) => {
  const merged: (Car | PromoCar)[] = [];

  cars.forEach((car, index) => {
    merged.push(car);
    const promo = promoCars[Math.floor(index / 10)];
    if ((index + 1) % 10 === 0 && promo) merged.push(promo);
  });

  return merged;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39SearchPage.tsx (before)

export default function SearchPage() {
  const [page, setPage] = useState(1);
  // List state that copies and accumulates server responses
  const [displayList, setDisplayList] = useState<(Car | PromoCar)[]>([]);

  const { cars, totalCount, isLoading } = useCarList({ keyword, sort, page }); // Main search
  const { promoCars, promoIsLoading } = usePromoList({ keyword, page }); // Secondary search (recommended listings)

  // Reset the accumulated list by hand when the keyword changes
  useEffect(() => {
    setDisplayList([]);
    setPage(1);
  }, [keyword]);

  // When both API responses arrive, merge them in the effect and append to the list
  useEffect(() => {
    if (cars && !promoIsLoading) {
      setDisplayList([...displayList, ...mergeCarsAndPromos(cars, promoCars ?? [])]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cars, promoCars]);

  // More button: increments the page number by hand
  const handleMore = () => setPage((prev) => prev + 1);

  return (
    <>
      {displayList.map((item) => (
        <ResultCard key={item.id} item={item} />
      ))}
      {/* More button display condition: decided by the main query only */}
      {!isLoading && totalCount > displayList.length && (
        <MoreButton onClick={handleMore} />
      )}
    </>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55api/useCarList.ts

import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';

interface CarListResponse {
  items: Car[];
  totalCount: number;
}

// Return only the body from the axios response to keep later data access simple
const fetchCarList = async (keyword: string, sort: string, page: number) => {
  const { data } = await api.get<CarListResponse>('/cars', {
    params: { keyword, sort, page },
  });
  return data;
};

// Why select: keep the cached original (the full response) as is and pick out only the shape the screen uses (an items array per page)
// Why module level: an inline function inside the component is recreated on every render, which breaks memoization of the select result
const selectCarList = (data: InfiniteData<CarListResponse>) => ({
  pages: data.pages.map((page) => page.items),
  totalCount: data.pages[0]?.totalCount ?? 0,
});

export const useCarList = ({ keyword, sort }: CarListParams) => {
  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      // Only search conditions go in the key. pageParam manages the page number, and accumulated pages reset automatically when the conditions change
      queryKey: ['carList', keyword, sort],
      // TanStack Query passes in pageParam (the page number)
      queryFn: ({ pageParam }) => fetchCarList(keyword, sort, pageParam),
      enabled: !!keyword, // Call only when there is a keyword
      initialPageParam: 1, // The first request is page 1
      // Compute the next page number. Returning undefined means the last page (hasNextPage is false)
      getNextPageParam: (lastPage, allPages) => {
        // Number of items loaded so far
        const loadedCount = allPages.flatMap((page) => page.items).length;
        // Stop on an empty page or once everything is loaded. Guards against the More button staying forever when totalCount is off
        if (lastPage.items.length === 0 || loadedCount >= lastPage.totalCount) {
          return undefined;
        }
        return allPages.length + 1;
      },
      select: selectCarList,
    });

  return {
    carPages: data?.pages ?? [],
    totalCount: data?.totalCount,
    isLoading,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33SearchPage.tsx (after)
export default function SearchPage() {
  // TanStack Query manages page accumulation, resets, and whether there is a next page
  const { carPages, totalCount, isFetchingNextPage, hasNextPage, fetchNextPage } =
    useCarList({ keyword, sort });
  const { promoPages, promoIsFetchingNextPage, fetchPromoNextPage } =
    usePromoList({ keyword, sort });

  // Compute the list during render from the pages in the cache. With no effect + setState step, there is no extra render or flicker
  // Why useMemo: to skip the merge and reuse the previous array on renders where the page data hasn't changed
  const displayList = useMemo(
    () => carPages.flatMap((cars, i) => mergeCarsAndPromos(cars, promoPages[i] ?? [])),
    [carPages, promoPages]
  );

  // More button: request the next main and secondary pages together (keeps page indexes 1:1)
  const handleMore = () => {
    fetchNextPage();
    fetchPromoNextPage();
  };

  return (
    <>
      {displayList.map((item) => (
        <ResultCard key={item.id} item={item} />
      ))}
      {/* Show only when there is a next page and neither query is fetching */}
      {hasNextPage && !isFetchingNextPage && !promoIsFetchingNextPage && (
        <MoreButton onClick={handleMore} />
      )}
    </>
  );
}