@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

 # @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
 
+## 0.6.0
+
+### Minor Changes
+
+- [`b560a09202a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b560a09202a) - Fixes a memoization issue, significantly improving rerender performance.
+
 ## 0.5.0
@@ -4,0 +10,0 @@

dist/cjs/hooks/use-cleanup-fn.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -7,16 +8,14 @@ value: true
 exports.useCleanupFn = useCleanupFn;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var noop = function noop() {};
-function useCleanupFn() {
-  var cleanupFnRef = (0, _react.useRef)(noop);
-  var setCleanupFn = (0, _react.useCallback)(function (cleanupFn) {
-    cleanupFnRef.current = cleanupFn;
-  }, []);
-  var runCleanupFn = (0, _react.useCallback)(function () {
-    cleanupFnRef.current();
-    setCleanupFn(noop);
-  }, [setCleanupFn]);
-  (0, _react.useEffect)(function () {
-    return runCleanupFn;
-  }, [runCleanupFn]);
+function createCleanupManager() {
+  var cleanupFn = noop;
+  var setCleanupFn = function setCleanupFn(newCleanupFn) {
+    cleanupFn = newCleanupFn;
+  };
+  var runCleanupFn = function runCleanupFn() {
+    cleanupFn();
+    cleanupFn = noop;
+  };
   return {
@@ -26,2 +25,15 @@ setCleanupFn: setCleanupFn,
   };
+}
+function useCleanupFn() {
+  var _useState = (0, _react.useState)(createCleanupManager),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    cleanupManager = _useState2[0];
+
+  /**
+   * Run the cleanup function on unmount.
+   */
+  (0, _react.useEffect)(function () {
+    return cleanupManager.runCleanupFn;
+  }, [cleanupManager.runCleanupFn]);
+  return cleanupManager;
 }

dist/cjs/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/es2019/hooks/use-cleanup-fn.js

@@ -1,15 +0,12 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 const noop = () => {};
-export function useCleanupFn() {
-  const cleanupFnRef = useRef(noop);
-  const setCleanupFn = useCallback(cleanupFn => {
-    cleanupFnRef.current = cleanupFn;
-  }, []);
-  const runCleanupFn = useCallback(() => {
-    cleanupFnRef.current();
-    setCleanupFn(noop);
-  }, [setCleanupFn]);
-  useEffect(() => {
-    return runCleanupFn;
-  }, [runCleanupFn]);
+function createCleanupManager() {
+  let cleanupFn = noop;
+  const setCleanupFn = newCleanupFn => {
+    cleanupFn = newCleanupFn;
+  };
+  const runCleanupFn = () => {
+    cleanupFn();
+    cleanupFn = noop;
+  };
   return {
@@ -19,2 +16,13 @@ setCleanupFn,
   };
+}
+export function useCleanupFn() {
+  const [cleanupManager] = useState(createCleanupManager);
+
+  /**
+   * Run the cleanup function on unmount.
+   */
+  useEffect(() => {
+    return cleanupManager.runCleanupFn;
+  }, [cleanupManager.runCleanupFn]);
+  return cleanupManager;
 }

dist/es2019/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/esm/hooks/use-cleanup-fn.js

@@ -1,15 +0,13 @@
-import { useCallback, useEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
 var noop = function noop() {};
-export function useCleanupFn() {
-  var cleanupFnRef = useRef(noop);
-  var setCleanupFn = useCallback(function (cleanupFn) {
-    cleanupFnRef.current = cleanupFn;
-  }, []);
-  var runCleanupFn = useCallback(function () {
-    cleanupFnRef.current();
-    setCleanupFn(noop);
-  }, [setCleanupFn]);
-  useEffect(function () {
-    return runCleanupFn;
-  }, [runCleanupFn]);
+function createCleanupManager() {
+  var cleanupFn = noop;
+  var setCleanupFn = function setCleanupFn(newCleanupFn) {
+    cleanupFn = newCleanupFn;
+  };
+  var runCleanupFn = function runCleanupFn() {
+    cleanupFn();
+    cleanupFn = noop;
+  };
   return {
@@ -19,2 +17,15 @@ setCleanupFn: setCleanupFn,
   };
+}
+export function useCleanupFn() {
+  var _useState = useState(createCleanupManager),
+    _useState2 = _slicedToArray(_useState, 1),
+    cleanupManager = _useState2[0];
+
+  /**
+   * Run the cleanup function on unmount.
+   */
+  useEffect(function () {
+    return cleanupManager.runCleanupFn;
+  }, [cleanupManager.runCleanupFn]);
+  return cleanupManager;
 }

dist/esm/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/types-ts4.5/hooks/use-cleanup-fn.d.ts

 import type { CleanupFn } from '../internal-types';
 export declare function useCleanupFn(): {
-    setCleanupFn: (cleanupFn: CleanupFn) => void;
+    setCleanupFn: (newCleanupFn: CleanupFn) => void;
     runCleanupFn: () => void;
 };

dist/types/hooks/use-cleanup-fn.d.ts

 import type { CleanupFn } from '../internal-types';
 export declare function useCleanupFn(): {
-    setCleanupFn: (cleanupFn: CleanupFn) => void;
+    setCleanupFn: (newCleanupFn: CleanupFn) => void;
     runCleanupFn: () => void;
 };

package.json

 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Migration layer for quickly moving from react-beautiful-dnd to @atlaskit/pragmatic-drag-and-drop.",
@@ -55,3 +55,3 @@ "publishConfig": {
     "@atlaskit/motion": "^1.4.0",
-    "@atlaskit/radio": "^5.5.0",
+    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/ssr": "*",
@@ -58,0 +58,0 @@ "@atlaskit/tokens": "^1.4.0",

No alert changes

Improved metrics

Total package byte prevSize

1010509

increased by0.11%

Lines of code

28281

increased by0.12%

No dependency changes