1. Recibo datos de la API y guardo solo objetos con estado 1 o 2 en el estado.

`const [artículos, setItems] = useState([]);

 const handleOnFetchData = useCallback((data) => { setItems( data.results.filter( (report) => report.status === 1 || report.status === 2 ) ); }, []);`

2. Los objetos cambian su estado con el tiempo. Y debe realizar un seguimiento cada 5 segundos en el intervalo.

Como lo hago:

1. Hay un useEffect que depende del estado con elementos, y si el estado no está vacío, itera sobre el estado y llama a la función monitoringItem para cada elemento

`let intervalo;

 useEffect(() => { if (items.length > 0) { items.forEach((report, i) => { interval = setInterval(() => { monitoringItem(report.record_id); }, 5000); }); } else { clearInterval(interval); } }, [items]);`

2. la función monitoringItem envía una solicitud cada 5 segundos y comprueba el estado del elemento. si el estado es distinto de 1 o 2, detenga el intervalo y elimine ese elemento del estado.

    const monitoringItem = useCallback( async (id) => { const response = await API.get(`/reports/${id}`); const monitoredReport = response.data.results[0]; if (monitoredReport.status !== 2 && monitoredReport.status !== 1) { clearInterval(interval); setItems( items.filter((rep) => rep.record_id !== monitoredReport.record_id) ); } }, [items] );

Pregunta y problema : ¿Cómo puedo colgar mi propio setInterval para cada elemento al agregar? Ahora todo está bien con 1 artículo. pero agregar otros lo rompe todo.