Browse Source

Amend DOM measurement hooks example to be clear about shortcomings

Fixes #2556.
main
Sophie Alpert 5 years ago
committed by GitHub
parent
commit
f2920cc67b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      content/docs/hooks-faq.md

4
content/docs/hooks-faq.md

@ -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}

Loading…
Cancel
Save