Please check the below snippet. The nested elements inside div changes and re-renders (managed by state), and accordingly height of div changes. But I'm not getting the most lasted height/width of div tag. It gives the previous (one render behind) height/width.
Any idea, how to get the most updated width/height of div on each re-render?
Thanks!
import { useRef, useEffect } from "react";
const Component = (props) => {
const willMount = useRef(true);
const y = useRef();
// const [width, height] = useWindowSize();
useLayoutEffect(() => {
console.log("helloUseLayout");
console.log(y.current.offsetWidth);
console.log(y.current.offsetHeight);
});
useEffect(() => {
if (willMount.current) {
//...
}
willMount.current = false;
console.log(y.current.offsetWidth);
console.log(y.current.offsetHeight);
});
return (
<div ref={y} style={{height: "300px", overflow: "auto" }}>
// Other Nested Components...
// causing overflow and thus creating Y-Scrollbar.
</div>
);
};
export default Component;