How to bind height in RectJS - html

Question

I want to bind height of two blocks;
const [blockHeight, setBlockHeight] = useState(0);
const inputCommandsRef = useRef(null);
useEffect(() => {
setBlockHeight(inputCommandsRef.current?.clientHeight)
}, [inputCommandsRef])
<div className="row" ref={inputCommandsRef}>
<div style={{padding: '20px'}} className="col-xxl-9">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div className="flex-line d-flex justify-content-start col-xxl-3"
style={{ maxHeight: `${maxHeight}px` }}>
<h1>maxHeight ${maxHeight}</h1>
<table>
....
</table>
</div>
</div>
Problem that when I change size of textArea the height of second block is not change (and value in h1 tag also), I just get once height and that is all.

Answer 1

You should not use useRef variables inside depsArray, they work in different way. You just need a ResizeObserver.
function Block() {
const [blockSize, setBlockSize] = useState({
width: 0,
height: 0
});
const inputCommandsRef = useRef(null);
useEffect(() => {
const { current } = inputCommandsRef;
if (!current) return;
const setSizes = () => {
setBlockSize({
width: current.clientWidth,
height: current.clientHeight
});
};
setSizes();
const obs = new ResizeObserver(setSizes);
obs.observe(current);
return () => {
obs.unobserve(current);
};
}, []);
return (
<div className="row" ref={inputCommandsRef}>
<div style={{ padding: "20px" }} className="col-xxl-9">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div
className="flex-line d-flex justify-content-start col-xxl-3"
style={{ maxHeight: `${blockSize.height}px` }}
>
<h1>maxHeight ${blockSize.height}</h1>
</div>
</div>
);
}