import fetchAppointments from 'src/redux/asyncThunkApiMethods'; import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; import React, { useEffect, useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; import { Table, TableHead, TableRow, TableCell, TableBody, Box, Typography } from '@material-ui/core'; import classes from '../../styles/AppointmentList.module.css'; const Appointments = (): JSX.Element => { const appState = useAppSelector((state) => state.appointments); const dispatch = useAppDispatch(); const location = useLocation(); const [isValid, setIsValid] = useState(false); const bac = location.pathname.split('/')[5]; useEffect(() => { if (!appState.loading) { if (!appState.errorMessage) { if (appState.appointmentList && appState.appointmentList.visits.length > 0) { setIsValid(true); } } } else { dispatch(fetchAppointments({ bac })); } const interval = setInterval(async () => { await dispatch(fetchAppointments({ bac })); }, 20000); return () => { clearInterval(interval); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [appState.appointmentList, appState.loading, bac, dispatch]);

Tengo un useEffect que actualmente realiza dos llamadas API cada vez. Necesito hacer una llamada cuando se monta el componente, luego establecer un intervalo que llamará a la API cada 20 segundos. No quiero llamadas dobles cada vez. He movido el código pero parece que no puedo llegar a ningún lado.