Amend DOM measurement hooks example to be clear about shortcomings

Fixes #2556.
This commit is contained in:
Sophie Alpert
2020-01-01 08:32:01 -08:00
committed by GitHub
parent 4df9e544de
commit f2920cc67b

View File

@@ -465,7 +465,7 @@ While you shouldn't need this often, you may expose some imperative methods to a
### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
One rudimentary way to measure the position or size of a DOM node is to use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
```js{4-8,12}
function MeasureExample() {
@@ -490,6 +490,8 @@ We didn't choose `useRef` in this example because an object ref doesn't notify u
Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
In this example, the callback ref will be called only when the component mounts and unmounts, since the rendered `<h1>` component stays present throughout any rerenders. If you want to be notified any time a component resizes, you may want to use [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) or a third-party Hook built on it.
If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
```js{2}