use-resize-observer - npm Package Compare versions

Comparing version 6.1.0-alpha.1 to 6.1.0-alpha.2

.size-limit.json

 [
   {
     "path": "dist/bundle.esm.js",
-    "limit": "323 B",
+    "limit": "353 B",
     "gzip": true
@@ -9,3 +9,3 @@ },
     "path": "dist/bundle.esm.js",
-    "limit": "243 B",
+    "limit": "266 B",
     "brotli": true
@@ -15,3 +15,3 @@ },
     "path": "dist/bundle.cjs.js",
-    "limit": "313 B",
+    "limit": "341 B",
     "gzip": true
@@ -21,3 +21,3 @@ },
     "path": "dist/bundle.cjs.js",
-    "limit": "233 B",
+    "limit": "258 B",
     "brotli": true
@@ -27,3 +27,3 @@ },
     "path": "polyfilled.js",
-    "limit": "2644 B",
+    "limit": "2673 B",
     "gzip": true
@@ -33,5 +33,5 @@ },
     "path": "polyfilled.js",
-    "limit": "2353 B",
+    "limit": "2381 B",
     "brotli": true
   }
 ]

CHANGELOG.md

 # CHANGELOG
 
+## 6.1.0-alpha2
+
+- ResizeObserver instances are no longer created unnecessarily when the onResize
+  callback changes. (Fixes #32)
+- Written new tests in [react testing library](https://github.com/testing-library/react-testing-library).
+
 ## 6.1.0-alpha1
@@ -4,0 +10,0 @@

dist/bundle.cjs.js

@@ -13,25 +13,14 @@ 'use strict';
   // @see https://reactjs.org/docs/hooks-rules.html#explanation
-  var defaultRef = react.useRef(null);
-  var ref = opts.ref || defaultRef;
+  var defaultRef = react.useRef(null); // Saving the callback as a ref. With this, I don't need to put onResize in the
+  // effect dep array, and just passing in an anonymous function without memoising
+  // will not reinstantiate the hook's ResizeObserver
+
   var onResize = opts.onResize;
+  var onResizeRef = react.useRef(undefined);
+  onResizeRef.current = onResize; // Using a single instance throughought the hook's lifetime
 
-  var _useState = react.useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+  var resizeObserverRef = react.useRef();
 
-
-  var previous = react.useRef({
-    width: undefined,
-    height: undefined
-  });
-  react.useEffect(function () {
-    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
-      return;
-    }
-
-    var element = ref.current;
-    var resizeObserver = new ResizeObserver(function (entries) {
+  if (!resizeObserverRef.current) {
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
       if (!Array.isArray(entries)) {
@@ -58,4 +47,4 @@ return;
 
-        if (onResize) {
-          onResize(newSize);
+        if (onResizeRef.current) {
+          onResizeRef.current(newSize);
         } else {
@@ -68,7 +57,29 @@ previous.current.width = newWidth;
     });
-    resizeObserver.observe(element);
+  }
+
+  var ref = opts.ref || defaultRef;
+
+  var _useState = react.useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = react.useRef({
+    width: undefined,
+    height: undefined
+  });
+  react.useEffect(function () {
+    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
+      return;
+    }
+
+    var element = ref.current;
+    resizeObserverRef.current.observe(element);
     return function () {
-      return resizeObserver.unobserve(element);
+      return resizeObserverRef.current.unobserve(element);
     };
-  }, [ref, onResize]);
+  }, [ref]);
   return react.useMemo(function () {
@@ -75,0 +86,0 @@ return {

dist/bundle.esm.js

@@ -11,25 +11,14 @@ import { useRef, useState, useEffect, useMemo } from 'react';
   // @see https://reactjs.org/docs/hooks-rules.html#explanation
-  var defaultRef = useRef(null);
-  var ref = opts.ref || defaultRef;
+  var defaultRef = useRef(null); // Saving the callback as a ref. With this, I don't need to put onResize in the
+  // effect dep array, and just passing in an anonymous function without memoising
+  // will not reinstantiate the hook's ResizeObserver
+
   var onResize = opts.onResize;
+  var onResizeRef = useRef(undefined);
+  onResizeRef.current = onResize; // Using a single instance throughought the hook's lifetime
 
-  var _useState = useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+  var resizeObserverRef = useRef();
 
-
-  var previous = useRef({
-    width: undefined,
-    height: undefined
-  });
-  useEffect(function () {
-    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
-      return;
-    }
-
-    var element = ref.current;
-    var resizeObserver = new ResizeObserver(function (entries) {
+  if (!resizeObserverRef.current) {
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
       if (!Array.isArray(entries)) {
@@ -56,4 +45,4 @@ return;
 
-        if (onResize) {
-          onResize(newSize);
+        if (onResizeRef.current) {
+          onResizeRef.current(newSize);
         } else {
@@ -66,7 +55,29 @@ previous.current.width = newWidth;
     });
-    resizeObserver.observe(element);
+  }
+
+  var ref = opts.ref || defaultRef;
+
+  var _useState = useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = useRef({
+    width: undefined,
+    height: undefined
+  });
+  useEffect(function () {
+    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
+      return;
+    }
+
+    var element = ref.current;
+    resizeObserverRef.current.observe(element);
     return function () {
-      return resizeObserver.unobserve(element);
+      return resizeObserverRef.current.unobserve(element);
     };
-  }, [ref, onResize]);
+  }, [ref]);
   return useMemo(function () {
@@ -73,0 +84,0 @@ return {

package.json

 {
   "name": "use-resize-observer",
-  "version": "6.1.0-alpha.1",
+  "version": "6.1.0-alpha.2",
   "main": "dist/bundle.cjs.js",
@@ -13,18 +13,15 @@ "module": "dist/bundle.esm.js",
   "scripts": {
-    "build": "run-s src:build test:build",
-    "watch": "KARMA_BROWSERS=Chrome run-p src:watch test:watch karma:watch",
-    "src:build": "rollup -c && tsc && cp dist/index.d.ts polyfilled.d.ts",
+    "build": "rollup -c && tsc && cp dist/index.d.ts polyfilled.d.ts",
+    "watch": "KARMA_BROWSERS=Chrome run-p 'src:watch' 'karma:watch'",
     "src:watch": "rollup -c -w",
-    "tsc": "tsc",
-    "size-limit": "size-limit",
-    "test": "run-s 'build' 'size-limit' 'tsc -p tests' 'test:chrome:headless' 'test:firefox:headless'",
-    "test:build": "parcel build tests/index.tsx --out-dir tests/dist",
-    "test:watch": "parcel watch tests/index.ts --out-dir tests/dist",
+    "check:size": "size-limit",
+    "check:tests": "tsc -p tests",
+    "test": "run-s 'build' 'check:size' 'check:tests' 'test:headless:*'",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
-    "test:chrome:headless": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
+    "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
     "test:firefox": "KARMA_BROWSERS=Firefox yarn karma:run",
-    "test:firefox:headless": "KARMA_BROWSERS=FirefoxHeadless yarn karma:run",
+    "test:headless:firefox": "KARMA_BROWSERS=FirefoxHeadless yarn karma:run",
     "karma:run": "karma start --singleRun",
     "karma:watch": "karma start",
-    "prepublish": "yarn src:build"
+    "prepublish": "yarn build"
   },
@@ -47,6 +44,9 @@ "husky": {
     "@babel/core": "^7.7.7",
+    "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@rollup/plugin-inject": "^4.0.1",
     "@size-limit/preset-small-lib": "^4.4.5",
+    "@testing-library/react": "^10.0.2",
     "@types/karma": "^5.0.0",
@@ -56,3 +56,3 @@ "@types/karma-jasmine": "^3.1.0",
     "@types/react-dom": "^16.9.6",
-    "babel-regenerator-runtime": "^6.5.0",
+    "babel-loader": "^8.1.0",
     "delay": "^4.1.0",
@@ -64,6 +64,7 @@ "husky": "^4.2.5",
     "karma-jasmine": "^3.1.1",
+    "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^4.0.2",
     "lint-staged": "^10.1.3",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.10.3",
     "prettier": "^2.0.4",
@@ -70,0 +71,0 @@ "react": "^16.9.0",

polyfilled.js

@@ -16,25 +16,14 @@ 'use strict';
   // @see https://reactjs.org/docs/hooks-rules.html#explanation
-  var defaultRef = react.useRef(null);
-  var ref = opts.ref || defaultRef;
+  var defaultRef = react.useRef(null); // Saving the callback as a ref. With this, I don't need to put onResize in the
+  // effect dep array, and just passing in an anonymous function without memoising
+  // will not reinstantiate the hook's ResizeObserver
+
   var onResize = opts.onResize;
+  var onResizeRef = react.useRef(undefined);
+  onResizeRef.current = onResize; // Using a single instance throughought the hook's lifetime
 
-  var _useState = react.useState({
-    width: undefined,
-    height: undefined
-  }),
-      size = _useState[0],
-      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+  var resizeObserverRef = react.useRef();
 
-
-  var previous = react.useRef({
-    width: undefined,
-    height: undefined
-  });
-  react.useEffect(function () {
-    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
-      return;
-    }
-
-    var element = ref.current;
-    var resizeObserver = new ResizeObserver(function (entries) {
+  if (!resizeObserverRef.current) {
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
       if (!Array.isArray(entries)) {
@@ -61,4 +50,4 @@ return;
 
-        if (onResize) {
-          onResize(newSize);
+        if (onResizeRef.current) {
+          onResizeRef.current(newSize);
         } else {
@@ -71,7 +60,29 @@ previous.current.width = newWidth;
     });
-    resizeObserver.observe(element);
+  }
+
+  var ref = opts.ref || defaultRef;
+
+  var _useState = react.useState({
+    width: undefined,
+    height: undefined
+  }),
+      size = _useState[0],
+      setSize = _useState[1]; // Using a ref to track the previous width / height to avoid unnecessary renders
+
+
+  var previous = react.useRef({
+    width: undefined,
+    height: undefined
+  });
+  react.useEffect(function () {
+    if (typeof ref !== "object" || ref === null || !(ref.current instanceof Element)) {
+      return;
+    }
+
+    var element = ref.current;
+    resizeObserverRef.current.observe(element);
     return function () {
-      return resizeObserver.unobserve(element);
+      return resizeObserverRef.current.unobserve(element);
     };
-  }, [ref, onResize]);
+  }, [ref]);
   return react.useMemo(function () {
@@ -78,0 +89,0 @@ return {

README.md

@@ -11,3 +11,3 @@ # use-resize-observer
 - Written in **TypeScript**.
-- **Tiny**: 323 B (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
+- **Tiny**: 353 B (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
 - Exposes an **onResize callback** if you need more control.
@@ -14,0 +14,0 @@ - [Throttle / Debounce](#throttle--debounce)

No alert changes

Improved metrics

Total package byte prevSize

20823

increased by8.4%

Lines of code

288

increased by7.87%

Worsened metrics

Dev dependency count

31

increased by14.81%

No dependency changes