Caso 1: usar la variable let fuera del componente de función
https://codepen.io/evan-jin/pen/VwWOPJV?editors=0010
Caso 2: usar React.useRef en el componente de función principal
https://codepen.io/evan-jin/pen/VwWOpvg?editors=0010
Caso 1
let cursorTimer = null // << this is the point for 1 case const Item = ({ num }) => { const [hoverItem, setHoverItem] = useState(null) const addCursor = useCallback(() => { clearTimeout(cursorTimer) cursorTimer = null cursorTimer = setTimeout(() => { document.body.style.cursor = 'wait' }, 10) }, []) const removeCursor = useCallback(() => { if (cursorTimer === null) return cursorTimer = setTimeout(() => { document.body.style.cursor = 'grab' }, 500) }, []) useEffect(() => { hoverItem ? addCursor() : removeCursor() }, [hoverItem]) ...Caso 2
const Item = ({ num, cursorTimerRef }) => { const [hoverItem, setHoverItem] = useState(null) const addCursor = useCallback(() => { clearTimeout(cursorTimerRef.current) cursorTimerRef.current = null cursorTimerRef.current = setTimeout(() => { document.body.style.cursor = 'wait' }, 10) }, []) const removeCursor = useCallback(() => { if (cursorTimerRef.current === null) return cursorTimerRef.current = setTimeout(() => { document.body.style.cursor = 'grab' }, 500) }, []) useEffect(() => { hoverItem ? addCursor() : removeCursor() }, [hoverItem]) ...Realmente me pregunto la diferencia entre estos mismos resultados.
Dado que declarar y usar la variable 'let' fuera del componente no activará la reproducción de los componentes, me da el mismo resultado que usar React useRef que tampoco activa la reproducción pero puede cambiar el estado en el componente.
Traté de buscar e investigar en Google, pero no pude encontrar una solución adecuada para mi pregunta. No sé cuál es mejor usar y eficiente.
¿Podría por favor alguien salvarme la vida?
Está funcionando perfectamente bien y eso es de esperar.
Citando esto de documentos de reacción
Evite usar refs para cualquier cosa que se pueda hacer declarativamente.
Las referencias son una cosa en React porque no todo se puede resolver de forma declarativa. Lo que tienes aquí no se puede hacer de forma declarativa. Así que tienes que usar refs. Usar una variable global para hacer esto está bien, y está bien, pero recomendaría usar refs, porque ofrecen una forma más simple y más React-y de hacer las cosas.
Además, las variables globales contaminarán rápidamente y provocarán fugas de memoria en su aplicación, lo que claramente no es el caso cuando se usan referencias.