Tengo un proceso en mi useEffect Hook. Necesito que este proceso se ejecute 3 veces y luego se detenga. Además, cada vez que cambia la variable getData (cadena de datos de api), necesito que el proceso se repita (lo que significa ejecutar 3 veces). El código actual funciona algunas veces y otras continúa sin parar. Incluso cuando getData no cambia. Parece que mi declaración if no responde. No veo la impresión de console.log('should stop'). He comprobado para ver si el valor en la instrucción if es un número y lo es. Simplemente no está ejecutando la condición.

 // getData is string that will change from api // use to stop the setInterval const getImageCounter = useRef(); useEffect(() => { let source = axios.CancelToken.source(); let imageCount = 0; getImageCounter.current = setInterval(() => { if (imageCount >= 3) { // stop setInterval when conditions are meet clearInterval(getImageCounter.current); console.info('should stop'); } imageCount++; console.log('rendering', imageCount); axios .get(`${network}/Image`, { cancelToken: source.token, }) .then(imageResponse => { const imageFilter = imageResponse.data.icon.substring(0, imageResponse.data.icon.lastIndexOf('=') + 1); //prettier-ignore setBase64Image(imageFilter); }) .catch(function (e) { if (axios.isCancel(e)) { console.log(`request cancelled:${e.message}`); } else { console.log( 'another error happened fetching overlays:' + e.message, ); } }); }, 3000); return function () { source.cancel('Cancelling in cleanup'); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [getData]);