How can I measure a DOM node is a bad example

[ehaynes99]

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

This is a bad example for callback refs. The callback only gets called if:

• The <input> element changes
• The ref callback changes (never in this example)

It does NOT get called if the dom node is resized. Example:

function MeasureExample() {
  const [width, setWidth] = useState(0)
  const [divWidth, setDivWidth] = useState(200)
  const toggleWidth = () => {
    setDivWidth(w => (w === 100 ? 200 : 100))
  }

  const measuredRef = useCallback((node) => {
    if (node !== null) {
      setWidth(node.getBoundingClientRect().width)
    }
  }, [])

  return (
    <div style={{ maxWidth: `${divWidth}px` }}>
      <h1 style={{ width: '100%' }} ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(width)}px wide</h2>
      <button onClick={toggleWidth}>Change Width</button>
    </div>
  )
}

Measuring in real time would need useEffect to run on every render reading the value of a traditional ref. Is there some other example that would make more sense to demonstrate callback refs?

[Izhaki]

To give a contrasting view, I always did one-offs measurements with useEffect and the example above was an epiphany for me.

But I agree the docs should state explicitly that the callback will only be called on mount/unmount.

[sophiebits]

I'll amend the example to be clear about its limitations.