From 46d51383e75a725d1bb7adc22e2da393bcbe2a0e Mon Sep 17 00:00:00 2001
From: Eng Zer Jun <engzerjun@gmail.com>
Date: Fri, 9 Feb 2024 03:54:28 +0800
Subject: [PATCH] [useResizeObserver] Fix initial width and height being 0 in
 docs example (#7518)

Signed-off-by: Eng Zer Jun <engzerjun@gmail.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 src-docs/src/views/resize_observer/resize_observer.js    | 2 +-
 .../src/views/resize_observer/resize_observer_hook.js    | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/resize_observer/resize_observer.js b/src-docs/src/views/resize_observer/resize_observer.js
index 2dc80a6576c..bb6910a5ff4 100644
--- 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
index 270b0fac636..dfccb3ac6f6 100644
--- 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) => (