Estoy usando React y estoy calculando la distancia/altura del div. Pero los valores son diferentes en el primer render y en el resto de los renders del componente. Los valores que vienen en los segundos renders consecutivos son correctos pero en la primera vez los valores son incorrectos.

 useEffect(() => { const footer = footerRef.current; const login = loginRef.current; if (!footer || !login) return; const windowHeight = window.screen.availHeight; // calculating the height of the screen const loginTop = login.offsetTop - login.scrollTop + login.clientTop // calculating the height of the div from the top const loginHeight = login.offsetHeight // calculating login div height const footerHeight = footer.clientHeight // calculating footer div height const calc = windowHeight - (loginTop + loginHeight + footerHeight) + 35; if (calc < 0) { // setting the position of the footer based on the calculation setCalcFooter(calc); } })

Los valores son diferentes en el primer renderizado y en el resto.

windowHeight = 640px en ambos renderizados.
loginTop = first-render: 13px y second-render: 87px .
loginHeight = first-render: 489px y second-render: 515px .
footerHeight = first-render: 24px y second-render: 142px

 <div> // code <div ref={loginRef}> // code </div> <div ref={footerRef} style={{ bottom: calcFooter }}> // here I am using that state variable // code </div> </div>

¿Hay alguna forma de que pueda obtener los valores correctos en el primer renderizado que obtengo en el segundo renderizado del componente?