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
This commit is contained in:
parent
63f40433cc
commit
b900b52b3c
1 changed files with 4 additions and 3 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue