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";
|
"use client";
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useEffect, useState, useCallback } from "react";
|
import { useEffect, useState, useCallback, useMemo } from "react";
|
||||||
import { Permission } from "../auth-context";
|
import { Permission } from "../auth-context";
|
||||||
import { api } from "../api";
|
import { api } from "../api";
|
||||||
import { Header } from "../components/Header";
|
import { Header } from "../components/Header";
|
||||||
|
|
@ -233,7 +233,8 @@ export default function BookingPage() {
|
||||||
const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
|
const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
|
||||||
const [isLoadingAvailability, setIsLoadingAvailability] = useState(true);
|
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) => {
|
const fetchSlots = useCallback(async (date: Date) => {
|
||||||
setIsLoadingSlots(true);
|
setIsLoadingSlots(true);
|
||||||
|
|
@ -281,7 +282,7 @@ export default function BookingPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchAllAvailability();
|
fetchAllAvailability();
|
||||||
}, [user, isAuthorized, dates]);
|
}, [user, isAuthorized]); // Removed dates from dependencies - dates is memoized and stable
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedDate && user && isAuthorized) {
|
if (selectedDate && user && isAuthorized) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue