[useResizeObserver] Fix initial width and height being 0 in docs exam…

…ple (#7518) Signed-off-by: Eng Zer Jun <[email protected]> Co-authored-by: Cee Chen <[email protected]>
elastic · Feb 8, 2024 · 46d5138 · 46d5138
1 parent ff701c1
commit 46d5138
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src-docs/src/views/resize_observer/resize_observer.js b/src-docs/src/views/resize_observer/resize_observer.js
@@ -34,7 +34,7 @@ export const ResizeObserverExample = () => {
       <EuiText>
         <p>
           <EuiCode>
-            height: {height}; width: ${width}
+            height: {height}; width: {width}
           </EuiCode>
         </p>
       </EuiText>

diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButton,
@@ -24,8 +24,9 @@ export const ResizeObserverHookExample = () => {
     setItems((items) => [...items, `Item ${items.length + 1}`]);
   };
 
-  const resizeRef = useRef();
-  const dimensions = useResizeObserver(resizeRef.current);
+  // Note: This must be a `useState` and not a `useRef` to correctly update on mount & unmount
+  const [resizeRef, setResizeRef] = useState();
+  const dimensions = useResizeObserver(resizeRef);
 
   return (
     <div>
@@ -56,7 +57,7 @@ export const ResizeObserverHookExample = () => {
 
       <EuiSpacer />
 
-      <div className="eui-displayInlineBlock" ref={resizeRef}>
+      <div className="eui-displayInlineBlock" ref={setResizeRef}>
         <EuiPanel className="eui-displayInlineBlock" paddingSize={paddingSize}>
           <ul>
             {items.map((item) => (