Extracted shallow equals to a utility

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "dist/index.umd.js": {
-    "bundled": 51976,
-    "minified": 17998,
-    "gzipped": 5723
+    "bundled": 51979,
+    "minified": 17984,
+    "gzipped": 5712
   },
   "dist/index.umd.min.js": {
     "bundled": 25153,
     "minified": 9859,
     "gzipped": 3371
   },
   "dist/index.esm.js": {
-    "bundled": 12252,
-    "minified": 7276,
-    "gzipped": 2063,
+    "bundled": 12247,
+    "minified": 7288,
+    "gzipped": 2066,
     "treeshaked": {
       "rollup": {
         "code": 3754,

src/Popper.js

@@ -9,7 +9,7 @@ import PopperJS, {
 } from 'popper.js';
 import type { Style } from 'typed-styles';
 import { ManagerContext } from './Manager';
-import { safeInvoke, unwrapArray } from './utils';
+import { safeInvoke, unwrapArray, shallowEqual } from './utils';
 
 type getRefFn = (?HTMLElement) => void;
 type ReferenceElement = ReferenceObject | HTMLElement | null;
@@ -169,27 +169,14 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
     ) {
 
       // develop only check that modifiers isn't being updated needlessly
-      if(process.env.NODE_ENV === "development" && this.props.modifiers !== prevProps.modifiers && this.props.modifiers != null && prevProps.modifiers != null) {
-        let needlessChange = false;
-
-        var prevKeys = Object.keys(prevProps.modifiers);
-        var nowKeys = Object.keys(this.props.modifiers);
-
-        if (nowKeys.length !== prevKeys.length) {
-          needlessChange = true;
-        }
-
-        for (var i = 0; i < nowKeys.length; i++) {
-          var key = prevKeys[i];
-
-          if (this.props.modifiers[key] !== prevProps.modifiers[key]) {
-            needlessChange = true;
-          }
-        }
-
-        if (needlessChange === true) {
-          console.warn("'modifiers' prop reference updated even though all values appear the same.\nConsider memoizing the 'modifiers' object to avoid needless rendering.");
-        }
+      if (
+        process.env.NODE_ENV === "development" &&
+        this.props.modifiers !== prevProps.modifiers &&
+        this.props.modifiers != null &&
+        prevProps.modifiers != null &&
+        shallowEqual(this.props.modifiers, prevProps.modifiers)
+      ) {
+        console.warn("'modifiers' prop reference updated even though all values appear the same.\nConsider memoizing the 'modifiers' object to avoid needless rendering.");
       }
 
       this.updatePopperInstance();

src/utils.js

@@ -15,3 +15,26 @@ export const safeInvoke = (fn: ?Function, ...args: *) => {
     return fn(...args);
   }
 }
+
+/**
+ * Does a shallow equality check of two objects by comparing the reference
+ * equality of each value.
+ */
+export const shallowEqual = (objA: { [key: string]: any}, objB: { [key: string]: any}): boolean => {
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+
+  if (bKeys.length !== aKeys.length) {
+    return false;
+  }
+
+  for (var i = 0; i < bKeys.length; i++) {
+    var key = aKeys[i];
+
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}