Cuando se desplaza a alguna posición en la lista y presiona "Espacio", se anteponen nuevos elementos a la lista. La intención del código es permanecer en la misma vista de desplazamiento que antes de que el usuario presionara "Espacio". Los elementos se cargan y, durante algunos milisegundos, la vista de desplazamiento está encima de los nuevos elementos antepuestos y luego se desplaza a la vista de desplazamiento anterior guardada. Quiero hacerlo al instante, sin ese retraso de milisegundos que es molesto para el usuario.

¿Es posible conseguirlo?

CÓDIGO:

 import React, { useState, useEffect, useRef } from "react"; import "./styles.css"; export default function App() { const listRefs = useRef({}); const scrollRef = useRef(); const oldListHeight = useRef(); const generateId = (length) => { let result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; const charactersLength = characters.length; for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; }; const generateList = () => { const html = []; for (let i = 0; i < Math.floor(Math.random() * 30) + 20; i++) { const id = generateId(15); listRefs.current[id] = React.createRef(); html.push( <li ref={listRefs[id]} key={id}> {id} </li> ); } return html; }; const [htmlList, setHtmlList] = useState(generateList()); useEffect(() => { setTimeout(() => { const listHeightDiff = scrollRef.current.scrollHeight - oldListHeight.current; scrollRef.current.scrollTo({ top: scrollRef.current.scrollTop + listHeightDiff }); }, 0); }, [htmlList]); useEffect(() => { window.addEventListener("keydown", handleKeyDown, false); return () => { window.removeEventListener("keydown", handleKeyDown, false); }; }, []); const handleKeyDown = (e) => { if (e.key === " ") { oldListHeight.current = scrollRef.current.scrollHeight; setHtmlList((htmlList) => [generateList(), ...htmlList]); } }; return ( <div className="App"> <div ref={scrollRef} className="wrapper"> <ul>{htmlList}</ul> </div> </div> ); }

PATIO DE JUEGOS:

https://codesandbox.io/s/affectionate-antonelli-wkvvd?file=/src/App.js