Estoy creando un componente funcional de desplazamiento infinito personalizado en reaccionar, que puede ir en ambas direcciones, y tengo algunos problemas porque necesito calcular scrollHeight y scrollWidth después de cargar los primeros elementos, que debería ser después del primer render.

Sin embargo, en lugar de obtener el valor correcto, obtengo clientHeight aunque la pantalla muestra una barra de desplazamiento y que el tamaño del primer elemento secundario está mucho más allá de clientHeight , hasta el tercer procesamiento o la segunda llamada de efecto.

Aquí está el código que muestra el problema sin la lógica innecesaria, el efecto de diseño no registra el valor completo hasta que se ejecuta por segunda vez:

 function InfiniteScroll({ children }) { const ref = useRef() console.log('render', ref?.current?.scrollHeight, children?.length) useLayoutEffect(() => { console.log('layout effect', ref?.current?.scrollHeight, children?.length) }) return ( <div ref={ref}> { children } </div> }

¿Hay alguna manera de obtener el valor total en la primera ejecución? Supongo que tiene que ver con hacer que los niños rendericen primero para obtener el ancho real. Si ese es el caso, ¿hay alguna forma de ejecutar un gancho useEffect después de que todo se haya renderizado?