From edfeb05bb2ada3682f689f1d69aa2977f5b53051 Mon Sep 17 00:00:00 2001
From: ykryshtal <ykryshtal@magnite.com>
Date: Wed, 8 Jan 2025 12:09:40 +0200
Subject: [PATCH] feat: Remove findDOMNode

---
 src/MutateObserver.tsx    | 17 ++++++---------
 src/useMutateObserver.tsx | 46 +++++++++++++++++++--------------------
 tests/index.test.tsx      | 32 +--------------------------
 3 files changed, 31 insertions(+), 64 deletions(-)

diff --git a/src/MutateObserver.tsx b/src/MutateObserver.tsx
index 435ed45..88ed9e8 100644
--- a/src/MutateObserver.tsx
+++ b/src/MutateObserver.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import { supportRef, useComposeRef } from 'rc-util/lib/ref';
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import DomWrapper from './wrapper';
+import React from 'react';
 import type { MutationObserverProps } from './interface';
 import useMutateObserver from './useMutateObserver';
+import DomWrapper from './wrapper';
 
 const MutateObserver: React.FC<MutationObserverProps> = props => {
   const { children, options, onMutate = () => {} } = props;
@@ -23,17 +22,15 @@ const MutateObserver: React.FC<MutationObserverProps> = props => {
     canRef ? (children as any).ref : null,
   );
 
-  const [target, setTarget] = React.useState<HTMLElement>(null);
+  const [target, setTarget] = React.useState<HTMLElement | DomWrapper>(null);
 
-  useMutateObserver(target, callback, options);
+  useMutateObserver(target as HTMLElement, callback, options);
 
   // =========================== Effect ===========================
   // Bind target
   useLayoutEffect(() => {
-    setTarget(
-      findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current),
-    );
-  });
+    setTarget(elementRef?.current || wrapperRef?.current);
+  }, []);
 
   // =========================== Render ===========================
   if (!children) {
diff --git a/src/useMutateObserver.tsx b/src/useMutateObserver.tsx
index 4c31d1d..50bfb3f 100644
--- a/src/useMutateObserver.tsx
+++ b/src/useMutateObserver.tsx
@@ -2,35 +2,35 @@ import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import * as React from 'react';
 
 const defaultOptions: MutationObserverInit = {
-  subtree: true,
-  childList: true,
-  attributeFilter: ['style', 'class'],
+    subtree: true,
+    childList: true,
+    attributeFilter: ['style', 'class'],
 };
 
 export default function useMutateObserver(
-  nodeOrList: HTMLElement | HTMLElement[],
-  callback: MutationCallback,
-  options: MutationObserverInit = defaultOptions,
+    nodeOrList: HTMLElement | HTMLElement[],
+    callback: MutationCallback,
+    options: MutationObserverInit = defaultOptions,
 ) {
-  React.useEffect(() => {
-    if (!canUseDom() || !nodeOrList) {
-      return;
-    }
+    React.useEffect(() => {
+        if (!canUseDom() || !nodeOrList) {
+            return;
+        }
 
-    let instance: MutationObserver;
+        let instance: MutationObserver;
 
-    const nodeList = Array.isArray(nodeOrList) ? nodeOrList : [nodeOrList];
+        const nodeList = Array.isArray(nodeOrList) ? nodeOrList : [nodeOrList];
 
-    if ('MutationObserver' in window) {
-      instance = new MutationObserver(callback);
+        if ('MutationObserver' in window) {
+            instance = new MutationObserver(callback);
 
-      nodeList.forEach(element => {
-        instance.observe(element, options);
-      });
-    }
-    return () => {
-      instance?.takeRecords();
-      instance?.disconnect();
-    };
-  }, [options, nodeOrList]);
+            nodeList.forEach(element => {
+                instance.observe(element, options);
+            });
+        }
+        return () => {
+            instance?.takeRecords();
+            instance?.disconnect();
+        };
+    }, [options, nodeOrList]);
 }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index c9afeb2..e525398 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
 import MutateObserver from '../src';
 
 describe('MutateObserver', () => {
@@ -27,34 +27,4 @@ describe('MutateObserver', () => {
     }
     unmount();
   });
-
-  it('findDOMNode should not error in React.StrictMode', () => {
-    const fn = jest.fn();
-    const buttonRef = React.createRef<HTMLButtonElement>();
-    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const Demo = React.forwardRef<
-      HTMLButtonElement,
-      React.HTMLAttributes<HTMLButtonElement>
-    >((props, ref) => {
-      const [flag, setFlag] = React.useState<boolean>(true);
-      return (
-        <React.StrictMode>
-          <MutateObserver onMutate={fn}>
-            <button
-              {...props}
-              ref={ref}
-              className={flag ? 'aaa' : 'bbb'}
-              onClick={() => setFlag(!flag)}
-            >
-              click
-            </button>
-          </MutateObserver>
-        </React.StrictMode>
-      );
-    });
-    const { container } = render(<Demo ref={buttonRef} />);
-    fireEvent.click(container.querySelector('button')!);
-    expect(warnSpy).not.toHaveBeenCalled();
-    warnSpy.mockRestore();
-  });
 });