Necesito crear un controlador de eventos en React en un gancho personalizado y me gustaría que la función de manejo de eventos sea referencialmente igual en todos los renders por... razones (sí, veo cómo puedo hacer esto sin pero quiero entender ). ¿Puedo usar useCallback como se muestra a continuación para garantizar que eventListener sea referencialmente igual en cada procesamiento simplemente sin mencionar las variables que cierra en las dependencias (como se muestra a continuación) o eso causará problemas incluso si nunca se pasa a un componente secundario, por lo que no lo hago? ¿Necesita que cambie el valor para activar los renderizados?
Si no, ¿cómo puedo lograr esto? ¿Importa si puedo suponer que la demora y el fn no cambian (excepto tal vez como referencia)?
export const useVisibleInterval = (fn, delay = 300000) => { const interval_id = useRef(null) const handleVisibilityChange = useCallback(() => { if (document.hidden || interval_id.current) return interval_id.current = setInterval(fn, delay) fn() }, []) const clearInt = () => { if (!interval_id.current) return clearInterval(interval_id.current) interval_id.current = null } const interval_run = () => { if (document.hidden) { document.addEventListener("visibilitychange", handleVisibilityChange) clearInt() } else fn() } const teardown = () => { document.removeEventListener("visibilitychange", handleVisibilityChange) clearInt() } useEffect(() => { interval_id.current = setInterval(interval_run, delay) return teardown }, []) }En un nivel realmente alto, me gustaría entender qué hacen las dependencias para useCallback. ¿Son solo para forzar la desigualdad de referencia para que los componentes secundarios que dependen de ella se vuelvan a representar? ¿O React memoriza el resultado de la ejecución de la función, por lo que no incluir las dependencias daría resultados obsoletos?
Según el comentario de pilchard, descubrí la respuesta (y que estaba siendo un idiota).
El problema es simplemente qué valores se actualizan cuando se llama a la función con nuevos argumentos. No es necesario que las referencias se incluyan en las dependencias de useCallback, por lo que la forma en que puedo hacer esto es simplemente reemplazar fn y retrasar con referencias que toman esos valores, por ejemplo,
ref_fn = useRef(fn) useEffect(()=> {ref_fn.current = fn}, [fn]}Y lo mismo para el retraso (o meterlos en la misma referencia). Pero resulta que ni siquiera necesitaba useCallback y la igualdad referencial y el código anterior refleja mi profunda confusión en ese momento y debe ignorarse.