fix: Added some fixes for React 18.

BREAKING CHANGE: The lib now takes "Element", not only "HTMLElement", to
be consistent with ResizeObserver.

fixes #90
fixes #91
fixes #92

Author: ZeeCoder

karma.conf.js

@@ -89,6 +89,7 @@ module.exports = function (karmaConfig) {
   );
 
   let testFilePattern = "tests/*.tsx";
+  // let testFilePattern = "tests/ssr.test.tsx";
   // let testFilePattern = "tests/basic.tsx";
   // let testFilePattern = "tests/testing-lib.tsx";
 

package.json

@@ -70,8 +70,8 @@
     "package.json"
   ],
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": "16.8.0 - 18",
+    "react-dom": "16.8.0 - 18"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
@@ -88,11 +88,11 @@
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@size-limit/preset-small-lib": "^5.0.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.1.1",
     "@types/karma": "^6.3.1",
     "@types/karma-jasmine": "^4.0.1",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "babel-loader": "^8.1.0",
     "delay": "^5.0.0",
     "husky": "^7.0.0",
@@ -107,9 +107,9 @@
     "lint-staged": "^11.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-app-polyfill": "^2.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "rollup": "^2.6.1",
     "semantic-release": "^17.2.2",
     "size-limit": "^5.0.1",

src/index.ts

@@ -15,7 +15,7 @@ type SubscriberResponse = SubscriberCleanup | void;
 // refs, but then host hooks / components could not opt out of renders.
 // This could've been exported to its own module, but the current build doesn't
 // seem to work with module imports and I had no more time to spend on this...
-function useResolvedElement<T extends HTMLElement>(
+function useResolvedElement<T extends Element>(
   subscriber: (element: T) => SubscriberResponse,
   refOrElement?: T | RefObject<T> | null
 ): RefCallback<T> {
@@ -26,12 +26,15 @@ function useResolvedElement<T extends HTMLElement>(
   } | null>(null);
   const cleanupRef = useRef<SubscriberResponse | null>();
 
+  // Resolving ".current" purely so that a new callSubscriber instance is created when needed.
+  const refElement =
+    refOrElement && "current" in refOrElement ? refOrElement.current : null;
   const callSubscriber = useCallback(() => {
     let element = null;
     if (callbackRefElement.current) {
       element = callbackRefElement.current;
     } else if (refOrElement) {
-      if (refOrElement instanceof HTMLElement) {
+      if (refOrElement instanceof Element) {
         element = refOrElement;
       } else {
         element = refOrElement.current;
@@ -60,7 +63,7 @@ function useResolvedElement<T extends HTMLElement>(
     if (element) {
       cleanupRef.current = subscriber(element);
     }
-  }, [refOrElement, subscriber]);
+  }, [refOrElement, refElement, subscriber]);
 
   // On each render, we check whether a ref changed, or if we got a new raw
   // element.
@@ -88,7 +91,7 @@ type ObservedSize = {
 
 type ResizeHandler = (size: ObservedSize) => void;
 
-type HookResponse<T extends HTMLElement> = {
+type HookResponse<T extends Element> = {
   ref: RefCallback<T>;
 } & ObservedSize;
 
@@ -159,7 +162,7 @@ const extractSize = (
 
 type RoundingFunction = (n: number) => number;
 
-function useResizeObserver<T extends HTMLElement>(
+function useResizeObserver<T extends Element>(
   opts: {
     ref?: RefObject<T> | T | null | undefined;
     onResize?: ResizeHandler;
@@ -194,6 +197,8 @@ function useResizeObserver<T extends HTMLElement>(
   // the component unmounted.
   const didUnmount = useRef(false);
   useEffect(() => {
+    didUnmount.current = false;
+
     return () => {
       didUnmount.current = true;
     };