react-grid-layout - npm Package Compare versions

Comparing version 0.18.1 to 0.18.2

build/GridItem.js

@@ -218,13 +218,8 @@ "use strict";
     ) {
-      var _this$props2 = this.props,
-          x = _this$props2.x,
-          y = _this$props2.y,
-          w = _this$props2.w,
-          h = _this$props2.h;
-      var oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), x, y, w, h, this.state);
-      x = nextProps.x;
-      y = nextProps.y;
-      w = nextProps.w;
-      h = nextProps.h;
-      var newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), x, y, w, h, nextState);
+      // We can't deeply compare children. If the developer memoizes them, we can
+      // use this optimization.
+      if (this.props.children !== nextProps.children) return true; // TODO memoize these calculations so they don't take so long?
+
+      var oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
+      var newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
       return !(0, _utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
@@ -316,6 +311,6 @@ }
     {
-      var _this$props3 = this.props,
-          usePercentages = _this$props3.usePercentages,
-          containerWidth = _this$props3.containerWidth,
-          useCSSTransforms = _this$props3.useCSSTransforms;
+      var _this$props2 = this.props,
+          usePercentages = _this$props2.usePercentages,
+          containerWidth = _this$props2.containerWidth,
+          useCSSTransforms = _this$props2.useCSSTransforms;
       var style; // CSS Transforms support (default)
@@ -380,10 +375,10 @@
     {
-      var _this$props4 = this.props,
-          cols = _this$props4.cols,
-          x = _this$props4.x,
-          minW = _this$props4.minW,
-          minH = _this$props4.minH,
-          maxW = _this$props4.maxW,
-          maxH = _this$props4.maxH,
-          transformScale = _this$props4.transformScale;
+      var _this$props3 = this.props,
+          cols = _this$props3.cols,
+          x = _this$props3.x,
+          minW = _this$props3.minW,
+          minH = _this$props3.minH,
+          maxW = _this$props3.maxW,
+          maxH = _this$props3.maxH,
+          transformScale = _this$props3.transformScale;
       var positionParams = this.getPositionParams(); // This is the max possible width - doesn't go to infinity because of the width of the window
@@ -438,11 +433,11 @@
       if (!handler) return;
-      var _this$props5 = this.props,
-          cols = _this$props5.cols,
-          x = _this$props5.x,
-          y = _this$props5.y,
-          i = _this$props5.i,
-          maxW = _this$props5.maxW,
-          minW = _this$props5.minW,
-          maxH = _this$props5.maxH,
-          minH = _this$props5.minH; // Get new XY
+      var _this$props4 = this.props,
+          cols = _this$props4.cols,
+          x = _this$props4.x,
+          y = _this$props4.y,
+          i = _this$props4.i,
+          maxW = _this$props4.maxW,
+          minW = _this$props4.minW,
+          maxH = _this$props4.maxH,
+          minH = _this$props4.minH; // Get new XY
 
@@ -474,11 +469,11 @@ var _calcWH = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y),
     {
-      var _this$props6 = this.props,
-          x = _this$props6.x,
-          y = _this$props6.y,
-          w = _this$props6.w,
-          h = _this$props6.h,
-          isDraggable = _this$props6.isDraggable,
-          isResizable = _this$props6.isResizable,
-          droppingPosition = _this$props6.droppingPosition,
-          useCSSTransforms = _this$props6.useCSSTransforms;
+      var _this$props5 = this.props,
+          x = _this$props5.x,
+          y = _this$props5.y,
+          w = _this$props5.w,
+          h = _this$props5.h,
+          isDraggable = _this$props5.isDraggable,
+          isResizable = _this$props5.isResizable,
+          droppingPosition = _this$props5.droppingPosition,
+          useCSSTransforms = _this$props5.useCSSTransforms;
       var pos = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(), x, y, w, h, this.state);
@@ -485,0 +480,0 @@

build/ReactGridLayout.js

@@ -257,3 +257,7 @@ "use strict";
     ) {
-      return !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || !(0, _lodash.default)(this.state.activeDrag, nextState.activeDrag);
+      return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
+        // from SCU is if the user intentionally memoizes children. If they do, and they can
+        // handle changes properly, performance will increase.
+        this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || !(0, _lodash.default)(this.state.activeDrag, nextState.activeDrag)
+      );
     }
@@ -260,0 +264,0 @@ }, {

CHANGELOG.md

 # Changelog
 
+0.18.2 (Feb 26, 2020)
+----
+
+### Bugfixes
+  - `shouldComponentUpdate`:
+    - A too-aggressive implementation of `shouldComponentUpdate` was shipped in 0.18.0-0.18.1 ([#1123](https://github.com/STRML/react-grid-layout/pull/1123)), which did not compare the `children` object. While this works well in many simple implementations of RGL, it breaks in more complex applications.
+    - Reference equality of `props.children` and `nextProps.children` is now added to `<ReactGridLayout>` and `<GridItem>`. If you wish to take advantage of the performance improvements from the `shouldComponentUpdate` work, memoize your children.
+    - A section has been added to the [README](/README.md#Performance) explaining how this works.
+    - Fixed [#1150](https://github.com/STRML/react-grid-layout/issues/1150), [#1151](https://github.com/STRML/react-grid-layout/issues/1151).
+
 0.18.1 (Feb 25, 2020)
@@ -4,0 +14,0 @@ ----

lib/GridItem.jsx

@@ -182,18 +182,20 @@ // @flow
   shouldComponentUpdate(nextProps: Props, nextState: State) {
-    let { x, y, w, h } = this.props;
+    // We can't deeply compare children. If the developer memoizes them, we can
+    // use this optimization.
+    if (this.props.children !== nextProps.children) return true;
+    // TODO memoize these calculations so they don't take so long?
     const oldPosition = calcGridItemPosition(
       this.getPositionParams(this.props),
-      x,
-      y,
-      w,
-      h,
+      this.props.x,
+      this.props.y,
+      this.props.w,
+      this.props.h,
       this.state
     );
-    ({ x, y, w, h } = nextProps);
     const newPosition = calcGridItemPosition(
       this.getPositionParams(nextProps),
-      x,
-      y,
-      w,
-      h,
+      nextProps.x,
+      nextProps.y,
+      nextProps.w,
+      nextProps.h,
       nextState
@@ -200,0 +202,0 @@ );

lib/ReactGridLayout.jsx

@@ -200,2 +200,6 @@ // @flow
     return (
+      // NOTE: this is almost always unequal. Therefore the only way to get better performance
+      // from SCU is if the user intentionally memoizes children. If they do, and they can
+      // handle changes properly, performance will increase.
+      this.props.children !== nextProps.children ||
       !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
@@ -202,0 +206,0 @@ !isEqual(this.state.activeDrag, nextState.activeDrag)

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -32,3 +32,4 @@ # React-Grid-Layout
 - [Grid Item Props](#grid-item-props)
-- [Users recipes](../../wiki/Users-recipes)
+- [User Recipes](../../wiki/Users-recipes)
+- [Performance](#performance)
 - [Contribute](#contribute)
@@ -447,2 +448,38 @@ - [TODO List](#todo-list)
 
+### Performance
+
+`<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:
+
+
+```js
+// lib/ReactGridLayout.jsx
+// ...
+shouldComponentUpdate(nextProps: Props, nextState: State) {
+  return (
+    // NOTE: this is almost always unequal. Therefore the only way to get better performance
+    // from SCU is if the user intentionally memoizes children. If they do, and they can
+    // handle changes properly, performance will increase.
+    this.props.children !== nextProps.children ||
+    !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
+    !isEqual(this.state.activeDrag, nextState.activeDrag)
+  );
+}
+// ...
+```
+
+If you memoize your children, you can take advantage of this, and reap faster rerenders. For example:
+
+```js
+function MyGrid() {
+  const children = React.useMemo((count) => {
+    return new Array(count).fill(undefined).map((val, idx) => {
+      return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
+    });
+  }, [props.count]);
+  return <ReactGridLayout cols={12}>{children}</ReactGridLayout>;
+}
+```
+
+Because the `children` prop doesn't change between rerenders, updates to `<MyGrid>` won't result in new renders, improving performance.
+
 ## Contribute
@@ -449,0 +486,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

245814

increased by1.28%

Lines of code

5405

increased by0.07%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

505

increased by7.91%

No dependency changes