From f2920cc67b6a84a533fa21208d6133bdfd30b620 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Wed, 1 Jan 2020 08:32:01 -0800 Subject: [PATCH] Amend DOM measurement hooks example to be clear about shortcomings Fixes #2556. --- content/docs/hooks-faq.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 9034ed81..59515925 100644 --- a/content/docs/hooks-faq.md +++ b/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 `

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