No estoy seguro de cómo implementar requestAnimationFrame en este ejemplo, ya que siempre creo un bucle infinito exponencial cuando lo intento. Quiero que la animación del movimiento del mousemove sea fluida, por eso quiero usar requestAnimationFrame pero ¿dónde debo configurarlo? En mi caso no puedo trabajar con useEffect . En Codesandbox, si mueve el mouse sobre el fondo rojo, debería activar el evento mousemove .

Códigos y caja: https://codesandbox.io/s/late-dream-97bfhp?file=/src/RequestAnimationFrameTest.tsx:0-1307

Código:

 import React, { useState, useRef } from "react"; const RequestAnimationFrameTest = () => { const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }); const [cursorVisible, setCursorVisible] = useState(false); const requestRef = useRef(); const handleMouseMove = (e) => { console.log("eventListener"); const x = e.pageX; const y = e.pageY; setCursorPos({ x: x, y: y }); // requestRef.current = requestAnimationFrame(handleMouseMove); }; const handleMouseMoveRef = useRef(handleMouseMove); const handleMouseEnter = () => { document.body.style.cursor = "none"; addEventListener("mousemove", handleMouseMoveRef.current); setCursorVisible(true); }; const handleMouseLeave = () => { document.body.style.cursor = "default"; removeEventListener("mousemove", handleMouseMoveRef.current); // cancelAnimationFrame(requestRef.current); setCursorVisible(false); }; return ( <div className="container"> {cursorVisible && ( <div style={{ top: cursorPos.y + "px", left: cursorPos.x + "px" }} className="cursor" > Mouse </div> )} <div className="item" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ></div> </div> ); };