UseEffect 不是由依赖关系触发的？

Question

Someone can help me? I'd be really thankful :) The problem here is that when the width and height changes, the UseEffect doesn't run again. This is a textarea that is being resized...

const [elem, setElem] = useState<HTMLElement>(document.createElement('textarea'))
const width = window.getComputedStyle(elem, null).getPropertyValue("width");
const height = window.getComputedStyle(elem, null).getPropertyValue("height");

   useEffect(() => {
      setElem(document.getElementById("email") as HTMLElement) 
      console.log(width, height)
   },[elem, width, height])

Answer 1

set the width and height using the useState .

const [width, setWidth] = useState(undefined);
const [height, setHeight] = useState(undefined);


useEffect(() => {
  const getWidth = () => window.getComputedStyle(elem, null).getPropertyValue("width");

  const getHeight = () => window.getComputedStyle(elem, null).getPropertyValue("height");
  const resizeListener = () => {
      setWidth(getWidth())
      setHeight(getHeight())
    };

  window.addEventListener('resize', resizeListener);

  resizeListener();
  // Don't foget cleanup!
  return () => window.removeEventListener('resize', resizeListener);
  // There's a dependency on the element, so if that changes, re-run the effect
}, [elem])

Attach the resize event listener and update width and height using setWidth and setHeight.

Answer 2

@William-wang has the right idea. Your code wouldn't retrigger the effect because the values never change except potentially when the code re-renders for other reasons.

While his method using a resize listener on the window will update the width and height, it only happens when the window's size changes.

I've modified the code to use the newer Resize Observer api . More details in How to detect DIV's dimension changed? .

This way, it's possible to get accurate and up-to-date size changes. The only issue with this approach is that older browsers don't support it . Though it does seem to be supported by all modern main browsers at this point.

 const { useState, useEffect, useRef } = React; function Example() { const elemRef = useRef(null); const [width, setWidth] = useState(undefined); const [height, setHeight] = useState(undefined); useEffect(() => { if (!elemRef.current) { return; } const resizeListener = () => { setWidth(elemRef.current.offsetWidth); setHeight(elemRef.current.offsetHeight); }; const observer = new ResizeObserver(resizeListener); observer.observe(elemRef.current); // Don't foget cleanup! return () => observer.disconnect(); }, []); return ( <div> width: {width} <br /> height: {height} <br /> <textarea ref={elemRef} /> </div> ); } ReactDOM.render(<Example />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"/>