title: Measure React DOM node on resize with hooks
body: <p>I'm trying to measure a React DOM node on the window resize event. I've used the example on the <a href="https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node" rel="noreferrer">React hooks-faq</a>, but it only happens for the first render. If I add a <code>useEffect</code> to listen for the resize, the callback doesn't get called?</p>
  
  <pre><code>function MeasureExample() {
      const [height, setHeight] = useState(0);
  
      const measuredRef = useCallback(node =&gt; {
          if (node !== null) {
              setHeight(node.getBoundingClientRect().height);
          }
      }, []);
  
  
      // Adding this effect doesn't re-calculate the height???
      useEffect(() =&gt; {
  
          window.addEventListener("resize", measuredRef);
  
          return (): void =&gt; {
              window.removeEventListener("resize", measuredRef);
          };
  
      }, [height])
  
      return (
          &lt;&gt;
              &lt;h1 ref={measuredRef}&gt;Hello, world&lt;/h1&gt;
              &lt;h2&gt;The above header is {Math.round(height)}px tall&lt;/h2&gt;
          &lt;/&gt;
      );
  }
  </code></pre>