From ab4855e187538ca7ad2148645595366e12c05335 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Sun, 4 Dec 2022 23:12:48 +1100
Subject: [PATCH] Move Mutation observer creation inside `useEffect`

(So it works in SSR)
---
 code/ui/components/src/Zoom/ZoomElement.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/code/ui/components/src/Zoom/ZoomElement.tsx b/code/ui/components/src/Zoom/ZoomElement.tsx
index 87d705450c4d..555e91e1763c 100644
--- a/code/ui/components/src/Zoom/ZoomElement.tsx
+++ b/code/ui/components/src/Zoom/ZoomElement.tsx
@@ -29,20 +29,20 @@ const useMutationObserver = ({
   options: MutationObserverInit;
   callback: MutationCallback;
 }): void => {
-  const observer = useMemo(
-    () =>
-      new MutationObserver((mutationRecord, mutationObserver) => {
-        callback(mutationRecord, mutationObserver);
-      }),
-    [callback]
-  );
+  const observer = useRef<MutationObserver>();
 
   useEffect(() => {
+    if (!observer.current) {
+      observer.current = new MutationObserver((mutationRecord, mutationObserver) => {
+        callback(mutationRecord, mutationObserver);
+      });
+    }
+
     if (element?.current) {
-      observer.observe(element.current, options);
+      observer.current.observe(element.current, options);
     }
 
-    return () => observer.disconnect();
+    return () => observer.current.disconnect();
   }, [element, observer, options]);
 };