Loop in useEffect? - reactjs

Question

I'm trying to select a date and the data should be reloaded every time a specific date is selected. But with my code, it would loop.
Currently I'm using syncfusion's schedule component. Redux toolkit.
Here is my code.
const Schedules = () => {
const { facilities } = useSelector((store) => store.allFacilities);
const { fieldsScheduler } = useSelector((store) => store.allFields);
const { timeSlots, isLoadingReservation } = useSelector(
(store) => store.allReservation
);
const [calRef, setCalRef] = useState();
const [time, setTime] = useState("");
useEffect(() => {
if (calRef && time) {
console.log("TIME", time);
dispatch(getAllReservation(time)); <--- Loop
}
}, [time, calRef]);
useEffect(() => {
dispatch(getFacilities());
dispatch(getFields());
}, []);
const dispatch = useDispatch();
if (isLoadingReservation) {
return <Loading />;
}
const headerInfo = (props) => {
return (
<Grid container>
<Grid item xs={12}>
<h6>{props.subject}</h6>
</Grid>
</Grid>
);
};
const bodyInfo = (props) => {
return (
<Grid container>
<Grid item xs={12}>
<h6>{`Giá tiền cụ thể`}</h6>
</Grid>
</Grid>
);
};
const footerInfo = (props) => {
return (
<Grid container>
<Grid item xs={12}>
<h6>{`Footer here`}</h6>
</Grid>
</Grid>
);
};
const eventTemplate = (props) => {
return (
<>
<div>
<Typography variant="p">
{`${props.subject}: ${props.rentalFee}`}K
</Typography>
</div>
<div>
<Typography variant="p">{`${moment(props.startTime, "HHmm").format(
"HH:mm"
)} - ${moment(props.endTime, "HHmm").format("HH:mm")} `}</Typography>
</div>
</>
);
};
const onDataBinding = () => {
// var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
// var currentViewDates = scheduleObj.getCurrentViewDates();
// dispatch(setCurrentDate(moment(startDate).format("YYYY-MM-DD[T]HH:mm:ss")));
// dispatch(
// getAllReservation(moment(startDate).format("YYYY-MM-DD[T]HH:mm:ss"))
// );
var currentViewDates = calRef.getCurrentViewDates();
var startDate = currentViewDates[0];
var endDate = currentViewDates[currentViewDates.length - 1];
console.log("Start date", startDate);
// setTime(moment(startDate).format("YYYY-MM-DD[T]HH:mm:ss"));
};
return (
<MDBox
width="100%"
height="100%"
minHeight="100vh"
borderRadius="lg"
shadow="lg"
bgColor="white"
sx={{ overflowX: "hidden" }}
>
<ScheduleComponent
cssClass="timeline-resource-grouping"
width="100%"
height="100%"
locale="vi"
readonly={true}
currentView="TimelineDay"
allowDragAndDrop={false}
dataBinding={onDataBinding}
// onChange={onDataBinding}
ref={(t) => setCalRef(t)}
// quickInfoTemplates={{
// header: headerInfo.bind(this),
// content: bodyInfo.bind(this),
// footer: footerInfo.bind(this),
// }}
//Data get all event in here. then mapping in ResourceDirective (field)
eventSettings={{
dataSource: timeSlots,
fields: {
subject: { name: "subject" },
id: "reservationId",
endTime: { name: "endTime" },
startTime: { name: "startTime" },
rentalFee: { name: "rentalFee", title: "Phí thuê sân" },
},
template: eventTemplate.bind(this),
}}
group={{ resources: ["Facilities", "Fields"] }}
>
<ResourcesDirective>
<ResourceDirective
field="facilityId"
title="Chọn cơ sở"
name="Facilities"
allowMultiple={false}
dataSource={facilities}
textField="facilityName"
idField="id"
></ResourceDirective>
<ResourceDirective
field="fieldId"
title="Sân"
name="Fields"
allowMultiple={true}
dataSource={fieldsScheduler}
textField="fieldName"
idField="id"
groupIDField="facilityId"
colorField="color"
></ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option="TimelineDay" />
<ViewDirective option="Day" />
</ViewsDirective>
<Inject
services={[
Day,
Week,
TimelineViews,
TimelineMonth,
Agenda,
Resize,
DragAndDrop,
]}
/>
</ScheduleComponent>
</MDBox>
);
};
export default Schedules;
This is my slice.
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
import { toast } from "react-toastify";
import customFetch from "utils/axios";
const initialState = {
isLoadingReservation: false,
timeSlots: [],
currentDate: "",
};
const authHeader = (thunkAPI) => {
return {
headers: {
Authorization: `Bearer ${thunkAPI.getState().user.user.accessToken}`,
},
};
};
export const getAllReservation = createAsyncThunk(
"allReservation/getAllReservation",
async (currentDay, thunkAPI) => {
console.log("Log:", currentDay);
try {
const response = await customFetch.post(
`/reservation-slots`,
{ date: currentDay },
authHeader(thunkAPI)
);
return response.data.timeSlots;
} catch (error) {
return thunkAPI.rejectWithValue(error.response.data);
}
}
);
const allReservationSlice = createSlice({
name: "allReservation",
initialState,
reducers: {
setCurrentDate: (state, action) => {
console.log("Payload", action.payload);
state.currentDate = action.payload;
},
},
extraReducers: {
[getAllReservation.pending]: (state, action) => {
state.isLoadingReservation = true;
},
[getAllReservation.fulfilled]: (state, action) => {
state.isLoadingReservation = false;
state.timeSlots = action.payload;
},
[getAllReservation.rejected]: (state, action) => {
state.isLoadingReservation = false;
toast.error(action.payload);
},
},
});
export const { setCurrentDate } = allReservationSlice.actions;
export default allReservationSlice.reducer;
But there is no way to do that. I used useEffect to update the UI again, but it still loop again.
I don't know if there is a way to solve my problem?
I sat for 3 days straight and the situation did not improve much.