From b900b52b3c41e671c5e3b6806a3791ae0a1f1b44 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sun, 21 Dec 2025 18:15:57 +0100
Subject: [PATCH] Fix infinite loop in booking page availability fetching

- Memoized dates array using useMemo to prevent recreation on every render
- Removed dates from useEffect dependency array since it's now stable
- Prevents cascade of API requests when opening booking page
- Dates only recalculate when minAdvanceDays or maxAdvanceDays change
---
 frontend/app/booking/page.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/app/booking/page.tsx b/frontend/app/booking/page.tsx
index d129422..c086c93 100644
--- a/frontend/app/booking/page.tsx
+++ b/frontend/app/booking/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { Permission } from "../auth-context";
 import { api } from "../api";
 import { Header } from "../components/Header";
@@ -233,7 +233,8 @@ export default function BookingPage() {
   const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
   const [isLoadingAvailability, setIsLoadingAvailability] = useState(true);
 
-  const dates = getDateRange(minAdvanceDays, maxAdvanceDays);
+  // Memoize dates to prevent infinite re-renders
+  const dates = useMemo(() => getDateRange(minAdvanceDays, maxAdvanceDays), [minAdvanceDays, maxAdvanceDays]);
 
   const fetchSlots = useCallback(async (date: Date) => {
     setIsLoadingSlots(true);
@@ -281,7 +282,7 @@ export default function BookingPage() {
     };
 
     fetchAllAvailability();
-  }, [user, isAuthorized, dates]);
+  }, [user, isAuthorized]); // Removed dates from dependencies - dates is memoized and stable
 
   useEffect(() => {
     if (selectedDate && user && isAuthorized) {