Parpadeando:

#01:

Simplemente introduzca un estilo de transición en el componente Cursor, por ejemplo, transition: "all 50ms" . Hace que el cambio de posición sea mucho más suave y cancela el parpadeo.

#02:

Sin embargo, como Guy mencionó anteriormente, manejar la posición del cursor en un estado significa una gran cantidad de renderizado para su componente, lo que hace que su aplicación sea más lenta al final.

Recomiendo hacer una ref para el cursor y actualizarla directamente desde un detector de eventos. Con ese cambio, incluso puede eliminar el gancho useMouse :

 const App = () => { const containerNodeRef = useRef(null); const cursorRef = useRef(null) const updateMouse = (e) => { // you can directly access the mouse's position in `e` // you don't even need the useMouse hook cursorRef.current.style.top = `${ey - SIZE / 2}px` cursorRef.current.style.left = `${ex - SIZE / 2}px` } useEffect(() => { window.addEventListener('mousemove', updateMouse) return () => { window.removeEventListener('mousemove', updateMouse) } }) return ( <div ref={containerNodeRef} style={{ width: window.innerWidth, height: window.innerHeight, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", cursor: 'none' }} > <Cursor ref={cursorRef} /> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } const Cursor = forwardRef(({ size = SIZE }, ref) => ( <div ref={ref} style={{ position: "absolute", width: size, height: size, backgroundColor: "black", color: "white", fontWeight: "bold", display: "flex", justifyContent: "center", alignItems: "center" }}> Hello </div> ) )

Problema de corte:

Dado que se está moviendo alrededor de un div real como su cursor, cuando alcanza el borde de su document , lo estira para hacer que el div encaje -> es por eso que el documento ya no cabe en su ventana, por lo que se representan las barras de desplazamiento .

Puedes arreglarlo a través de css:

 body { overflow: hidden }

+1:

No estoy seguro de cómo debe verse el cursor al final, pero si fuera una imagen, hay otra solución posible. Agregue esta regla css a su contenedor, que carga una imagen como un cursor y luego el navegador se encarga de la representación automáticamente:

 <div ref={containerNodeRef} style={{ // ... cursor: 'url("url"), auto' }} >

Si usara esta solución, ya no necesitaría todo el componente Cursor ni el cálculo de la posición. Sin embargo, la desventaja es que solo funciona con imágenes.

Editar: cuerpo desbordado (también conocido como tercer problema)

si agregará esto a su etiqueta de cuerpo, debería resolverlo:

 margin: 0; height: 100%; overflow: hidden

editar - Con respecto a su segundo problema

para evitar que aparezcan las barras de desplazamiento, puede usar overflow-y: hidden; (para deshabilitar en el eje x, simplemente cambie overflow-y a overflow-x , overflow: hidden; para ambos)

PERO si desea habilitar el desplazamiento pero simplemente ocultar la barra de desplazamiento, use el siguiente código:

 /* hide scrollbar but allow scrolling */ body { -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ overflow-y: scroll; } body::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ }

aquí hay un gif de un ejemplo de trabajo en mi navegador: https://imgur.com/a/wOV7car

No se corta para mí en el lado derecho (ver imagen a continuación). Parece que el segundo problema ocurre porque su cursor se vuelve a renderizar cada vez que lo mueve, ¡y eso es mucho trabajo para su sitio!

debe eliminar los atributos de estilo del componente Cursor y ajustar el código dentro de su detector de eventos para un evento de movimiento del mouse. se verá así:

 onMouseMove = {e => { const cursor = document.querySelector('.cursor') cursor.style.top = ׳${e.pageY}px׳ cursor.style.left = ׳${e.pageX}px׳ }}

Ya hay 2 buenas respuestas, pero también agregaré esta, porque otras respuestas complican demasiado la solución.

1. Parpadeando

no importa si usa ref o estado, solo debe extraer el cursor para separar el Componente, de esa manera su componente de la aplicación no se volverá a procesar

2. Barras de desplazamiento

como se mencionó en otras respuestas, usando body { overflow: hidden; } resolverá este problema, pero parcialmente. Su cursor está tratando de ir más allá del tamaño de la página, por lo tanto, la página muestra barras de desplazamiento, agregar una limitación para la posición del cursor resolverá esto: cursor.y = Math.max(0, Math.min(currentPositionY, page.width)) (pseudocódigo ) ahora cursor.y no excederá 0 o page.width