Por lo general, uso limpiezas de efectos como esta:

 useEffect(() => { if (!openModal) { let controller = new AbortController(); const getEvents = async () => { try { const response = await fetch(`/api/groups/`, { signal: controller.signal, }); const jsonData = await response.json(); setGroupEvents(jsonData); controller = null; } catch (err) { console.error(err.message); } }; getEvents(); return () => controller?.abort(); } }, [openModal]);

Pero no sé cómo hacer en esta situación:

Tengo useEffect en el archivo Events.js que obtiene eventos de la función y la función en el archivo helpers.js que crea eventos en fechas determinadas excepto días festivos (las fechas de vacaciones se obtienen de la base de datos).

Eventos.js

 useEffect(() => { if (groupEvents.length > 0) { const getGroupEvents = async () => { const passed = await passEvents(groupEvents); // function in helpers.js (return array of events) if (passed) { setEvents(passed.concat(userEvents)); } else { setEvents(userEvents); } }; getGroupEvents(); } }, [groupEvents, userEvents]);

ayudantes.js

 const passEvents = async (e) => { try { const response = await fetch(`/api/misc/holidays`, { credentials: 'same-origin', }); const jsonData = await response.json(); const holidays = jsonData.map((x) => x.date.split('T')[0]); // holiday dates return getEvents(e, holidays); // create events } catch (err) { console.error(err.message); } };