diff --git a/.size-snapshot.json b/.size-snapshot.json index de23598..f90bfc7 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,8 +1,8 @@ { "dist/index.umd.js": { - "bundled": 51976, - "minified": 17998, - "gzipped": 5723 + "bundled": 51979, + "minified": 17984, + "gzipped": 5712 }, "dist/index.umd.min.js": { "bundled": 25153, @@ -10,9 +10,9 @@ "gzipped": 3371 }, "dist/index.esm.js": { - "bundled": 12252, - "minified": 7276, - "gzipped": 2063, + "bundled": 12247, + "minified": 7288, + "gzipped": 2066, "treeshaked": { "rollup": { "code": 3754, diff --git a/src/Popper.js b/src/Popper.js index d447160..f657fae 100644 --- a/src/Popper.js +++ b/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 { ) { // 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(); diff --git a/src/utils.js b/src/utils.js index aaa9b19..2af2b58 100644 --- a/src/utils.js +++ b/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; +}