Tengo este código, me gustaría clearInterval desde fuera de este componente (supongamos que renderizo un botón con el método onClick que llama a la función clearInterval). Traté de pasar el valor del intervalo como una referencia, pero tan pronto como el estado actualice, este valor cambiará.
useEffect(() => { (intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => { fetch().then((items) => { items.forEach((item, id) => { // set state based on the values }); }); }, 5000); return () => clearInterval(intervalRef.current); }, [state]); También recibo una advertencia de eslint para return () => clearInterval(intervalRef.current) , por lo que supongo que tampoco se borrará correctamente dentro de este método.
"El valor de referencia 'intervalRef.current' probablemente habrá cambiado para cuando se ejecute esta función de limpieza de efectos. Si esta referencia apunta a un nodo representado por React, copie 'intervalRef.current' en una variable dentro del efecto y use esa variable en la función de limpieza".
¿Cuál es el enfoque correcto de tales problemas en React?
useEffect(() => { const intervalId = setInterval(() => { fetch().then((items) => { items.forEach((item, id) => { // set state based on the values }); }); }, 5000); return () => clearInterval(intervalId); }, [state]);No necesita convertirlo en una referencia, si todo lo que quiere es limpiar el intervalo al desmontar. Simplemente asígnelo a una variable y páselo a su función de limpieza.
Nota: veo que está planeando hacer una actualización de estado en promesa. es posible que se encuentre con un problema en el que el componente se desmonta y luego se activa la devolución de llamada de promesa que intenta actualizar el estado. así que tal vez ponga un cheque isMounted
"El valor de referencia 'intervalRef.current' probablemente habrá cambiado para cuando se ejecute esta función de limpieza de efectos. Si esta referencia apunta a un nodo representado por React, copie 'intervalRef.current' en una variable dentro del efecto y use esa variable en la función de limpieza".
Esto dice guardar una referencia al valor de referencia en el cierre de devolución de llamada del gancho useEffect , para usar en la función de limpieza.
useEffect(() => { (intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => { fetch().then((items) => { items.forEach((item, id) => { // set state based on the values }); }); }, 5000); const timerId = intervalRef.current; return () => clearInterval(timerId); }, [state]);Si necesita, o desea, borrar el intervalo desde cualquier otro lugar en el alcance del componente, simplemente borre el intervalo como lo haría normalmente con el valor de referencia actual:
clearInterval(intervalRef.current);