Use shallowEqualScalar by default

examples/_sortable-simple/Card.js

@@ -58,8 +58,6 @@ const cardTarget = {
 };
 
 export default configureDragDrop(Card, {
-  arePropsEqual: shallowEqual,
-
   configure: (register) => ({
     cardSourceId: register.dragSource(ItemTypes.CARD, cardSource),
     cardTargetId: register.dropTarget(ItemTypes.CARD, cardTarget)

examples/_sortable-stress/Card.js

@@ -23,10 +23,6 @@ const propTypes = {
 };
 
 class Card {
-  shouldComponentUpdate(nextProps) {
-    return !shallowEqual(nextProps, this.props);
-  }
-
   render() {
     const { text, isDragging, dragSourceRef, dropTargetRef } = this.props;
     const opacity = isDragging ? 0 : 1;
@@ -58,8 +54,6 @@ const cardTarget = {
 };
 
 export default configureDragDrop(Card, {
-  arePropsEqual: shallowEqual,
-
   configure: (register) => ({
     cardSourceId: register.dragSource(ItemTypes.CARD, cardSource),
     cardTargetId: register.dropTarget(ItemTypes.CARD, cardTarget)

modules/configureDragDrop.js

@@ -1,23 +1,23 @@
 import React, { Component, PropTypes, findDOMNode } from 'react';
 import ComponentDragSource from './ComponentDragSource';
 import ComponentDropTarget from './ComponentDropTarget';
+import shallowEqualScalar from './utils/shallowEqualScalar';
 import assign from 'lodash/object/assign';
 import memoize from 'lodash/function/memoize';
 import invariant from 'react/lib/invariant';
-import shallowEqual from 'react/lib/shallowEqual';
 
 const DEFAULT_KEY = '__default__';
 
 export default function configureDragDrop(InnerComponent, {
   configure,
   inject,
-  arePropsEqual = () => false,
+  arePropsEqual = shallowEqualScalar,
   managerName = 'dragDropManager'
 }) {
   class DragDropContainer extends Component {
     shouldComponentUpdate(nextProps, nextState) {
       return !arePropsEqual(nextProps, this.props) ||
-             !shallowEqual(nextState, this.state);
+             !shallowEqualScalar(nextState, this.state);
     }
 
     constructor(props, context) {
@@ -63,7 +63,7 @@ export default function configureDragDrop(InnerComponent, {
 
     handleChange() {
       const nextState = this.getCurrentState();
-      if (!shallowEqual(nextState, this.state)) {
+      if (!shallowEqualScalar(nextState, this.state)) {
         this.setState(nextState);
       }
     }

modules/utils/shallowEqualScalar.js

@@ -0,0 +1,29 @@
+import isBoolean from 'lodash/lang/isBoolean';
+import isString from 'lodash/lang/isString';
+import isNumber from 'lodash/lang/isNumber';
+import isFunction from 'lodash/lang/isFunction';
+
+export default function shallowEqualScalar(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+
+  var key;
+  for (key in objA) {
+    if (objA.hasOwnProperty(key) &&
+        (!objB.hasOwnProperty(key) ||
+          objA[key] !== objB[key] ||
+          typeof objA[key] === 'object' ||
+          typeof objB[key] === 'object')) {
+      return false;
+    }
+  }
+
+  for (key in objB) {
+    if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+
+  return true;
+}