[useResizeObserver] Update example code

Reference: #7518 (comment) Signed-off-by: Eng Zer Jun <[email protected]>
elastic · Feb 8, 2024 · 0b5b93a · 0b5b93a
1 parent defc836
commit 0b5b93a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 13 deletions.
diff --git a/changelogs/upcoming/7518.md b/changelogs/upcoming/7518.md
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,8 @@ export const ResizeObserverHookExample = () => {
     setItems((items) => [...items, `Item ${items.length + 1}`]);
   };
 
-  const resizeRef = useRef();
-  const dimensions = useResizeObserver(resizeRef.current);
+  const [resizeRef, setResizeRef] = useState();
+  const dimensions = useResizeObserver(resizeRef);
 
   return (
     <div>
@@ -56,7 +56,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) => (

diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
@@ -70,10 +70,7 @@ export const useResizeObserver = (
   container: Element | null,
   dimension?: 'width' | 'height'
 ) => {
-  const [size, _setSize] = useState<{
-    width: undefined | number;
-    height: undefined | number;
-  }>({ width: undefined, height: undefined });
+  const [size, _setSize] = useState({ width: 0, height: 0 });
 
   // _currentDimensions and _setSize are used to only store the
   // new state (and trigger a re-render) when the new dimensions actually differ
@@ -122,5 +119,5 @@ export const useResizeObserver = (
     }
   }, [container, setSize]);
 
-  return { width: size.width ?? 0, height: size.height ?? 0 };
+  return { width: size.width, height: size.height };
 };