From 54a756cb869de66cd0876f988bd792fe21bbd428 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Fri, 13 Feb 2026 23:00:54 +0100
Subject: [PATCH] Fix infinite rerender in InfiniteFetch

---
 front/app.config.ts                |  1 +
 front/src/query/fetch-infinite.tsx | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/front/app.config.ts b/front/app.config.ts
index 9c42ee2e..caf856d9 100644
--- a/front/app.config.ts
+++ b/front/app.config.ts
@@ -112,5 +112,6 @@ export const expo: ExpoConfig = {
 	],
 	experiments: {
 		typedRoutes: true,
+		reactCompiler: true,
 	},
 };
diff --git a/front/src/query/fetch-infinite.tsx b/front/src/query/fetch-infinite.tsx
index 748fee36..b1fb3279 100644
--- a/front/src/query/fetch-infinite.tsx
+++ b/front/src/query/fetch-infinite.tsx
@@ -1,6 +1,6 @@
 import type { LegendListProps } from "@legendapp/list";
 import { AnimatedLegendList } from "@legendapp/list/reanimated";
-import { type ComponentType, type ReactElement, useRef } from "react";
+import { type ComponentType, type ReactElement, useMemo, useRef } from "react";
 import type { ViewStyle } from "react-native";
 import { type Breakpoint, HR, useBreakpointMap } from "~/primitives";
 import { type QueryIdentifier, useInfiniteFetch } from "./query";
@@ -50,7 +50,7 @@ export const InfiniteFetch = <Data, Type extends string = string>({
 }): JSX.Element | null => {
 	const { numColumns, size, gap } = useBreakpointMap(layout);
 	const oldItems = useRef<Data[] | undefined>(undefined);
-	let { items, fetchNextPage, isFetching, refetch, isRefetching } =
+	let { items, fetchNextPage, hasNextPage, isFetching, refetch, isRefetching } =
 		useInfiniteFetch(query);
 	if (incremental && items) oldItems.current = items;
 	if (incremental) items ??= oldItems.current;
@@ -58,12 +58,14 @@ export const InfiniteFetch = <Data, Type extends string = string>({
 	if (!query.infinite)
 		console.warn("A non infinite query was passed to an InfiniteFetch.");
 
-	const count = items
-		? numColumns - (items.length % numColumns)
-		: placeholderCount;
-	const placeholders = [...Array(count === 0 ? numColumns : count)].fill(0);
-	const data =
-		isFetching || !items ? [...(items || []), ...placeholders] : items;
+	const data = useMemo(() => {
+		const count = items
+			? numColumns - (items.length % numColumns)
+			: placeholderCount;
+		const placeholders = [...Array(count === 0 ? numColumns : count)].fill(0);
+		if (!items) return placeholders;
+		return isFetching ? [...items, ...placeholders] : items;
+	}, [items, isFetching, placeholderCount, numColumns]);
 
 	return (
 		<AnimatedLegendList
@@ -83,7 +85,11 @@ export const InfiniteFetch = <Data, Type extends string = string>({
 			keyExtractor={(item: any, index) => (item ? item.id : index + 1)}
 			horizontal={layout.layout === "horizontal"}
 			numColumns={layout.layout === "horizontal" ? 1 : numColumns}
-			onEndReached={fetchMore ? () => fetchNextPage() : undefined}
+			onEndReached={
+				fetchMore && hasNextPage && !isFetching
+					? () => fetchNextPage()
+					: undefined
+			}
 			onEndReachedThreshold={0.5}
 			onRefresh={layout.layout !== "horizontal" ? refetch : undefined}
 			refreshing={isRefetching}