How to bind height in RectJS-CodePudding

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.

CodePudding user response：

You should not use useRef variables inside depsArray, they work in different way. You just need a