Move Mutation observer creation inside useEffect

(So it works in SSR)
storybookjs · Dec 4, 2022 · ab4855e · ab4855e
1 parent 74f795f
commit ab4855e
Showing 1 changed file with 9 additions and 9 deletions.
diff --git 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]);
 };