fix(children): Proper fix for checking children props for changes

See react-grid-layout#304

Author: STRML

lib/ReactGridLayout.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React, {PropTypes} from 'react';
 import isEqual from 'lodash.isequal';
-import {autoBindHandlers, bottom, cloneLayoutItem, compact, getLayoutItem, moveElement,
+import {autoBindHandlers, bottom, childrenEqual, cloneLayoutItem, compact, getLayoutItem, moveElement,
   synchronizeLayoutWithChildren, validateLayout} from './utils';
 import GridItem from './GridItem';
 const noop = function() {};
@@ -176,7 +176,7 @@ export default class ReactGridLayout extends React.Component {
     // If children change, also regenerate the layout. Use our state
     // as the base in case because it may be more up to date than
     // what is in props.
-    else if (nextProps.children.length !== this.props.children.length) {
+    else if (!childrenEqual(this.props.children, nextProps.children)) {
       newLayoutBase = this.state.layout;
     }
 

lib/utils.js

@@ -1,4 +1,6 @@
 // @flow
+import isEqual from 'lodash.isEqual';
+import React from 'react';
 export type LayoutItemRequired = {w: number, h: number, x: number, y: number, i: string};
 export type LayoutItem = LayoutItemRequired &
                          {minW?: number, minH?: number, maxW?: number, maxH?: number,
@@ -15,7 +17,6 @@ export type DragCallbackData = {
 export type DragEvent = {e: Event} & DragCallbackData;
 export type Size = {width: number, height: number};
 export type ResizeEvent = {e: Event, node: HTMLElement, size: Size};
-import type React from 'react';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -53,10 +54,16 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
   };
 }
 
+/**
+ * Comparing React `children` is a bit difficult. This is a good way to compare them.
+ * This will catch differences in keys, order, and length.
+ */
+export function childrenEqual(a: Array<React.Element<any>>, b: Array<React.Element<any>>): boolean {
+  return isEqual(React.Children.map(a, c => c.key), React.Children.map(b, c => c.key));
+}
+
 /**
  * Given two layoutitems, check if they collide.
- *
- * @return {Boolean}   True if colliding.
  */
 export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
   if (l1 === l2) return false; // same element