react-native-onyx 1.0.18 → 1.0.20

package/lib/Onyx.js

@@ -6,7 +6,8 @@ import Storage from './storage';
 import * as Logger from './Logger';
 import cache from './OnyxCache';
 import createDeferredTask from './createDeferredTask';
-import mergeWithCustomized from './mergeWithCustomized';
+import fastMerge from './fastMerge';
+import * as PerformanceUtils from './metrics/PerformanceUtils';
 
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
@@ -323,12 +324,13 @@ function keysChanged(collectionKey, partialCollection) {
             if (isSubscribedToCollectionKey) {
                 subscriber.withOnyxInstance.setState((prevState) => {
                     const finalCollection = _.clone(prevState[subscriber.statePropertyName] || {});
-
                     const dataKeys = _.keys(partialCollection);
                     for (let j = 0; j < dataKeys.length; j++) {
                         const dataKey = dataKeys[j];
                         finalCollection[dataKey] = cachedCollection[dataKey];
                     }
+
+                    PerformanceUtils.logSetStateCall(subscriber, prevState[subscriber.statePropertyName], finalCollection, 'keysChanged', collectionKey);
                     return {
                         [subscriber.statePropertyName]: finalCollection,
                     };
@@ -345,8 +347,17 @@ function keysChanged(collectionKey, partialCollection) {
                     continue;
                 }
 
-                subscriber.withOnyxInstance.setState({
-                    [subscriber.statePropertyName]: cachedCollection[subscriber.key],
+                subscriber.withOnyxInstance.setState((prevState) => {
+                    const data = cachedCollection[subscriber.key];
+                    const previousData = prevState[subscriber.statePropertyName];
+                    if (data === previousData) {
+                        return null;
+                    }
+
+                    PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keysChanged', collectionKey);
+                    return {
+                        [subscriber.statePropertyName]: data,
+                    };
                 });
             }
         }
@@ -397,19 +408,29 @@ function keyChanged(key, data) {
             if (isCollectionKey(subscriber.key)) {
                 subscriber.withOnyxInstance.setState((prevState) => {
                     const collection = prevState[subscriber.statePropertyName] || {};
+                    const newCollection = {
+                        ...collection,
+                        [key]: data,
+                    };
+                    PerformanceUtils.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
                     return {
-                        [subscriber.statePropertyName]: {
-                            ...collection,
-                            [key]: data,
-                        },
+                        [subscriber.statePropertyName]: newCollection,
                     };
                 });
                 continue;
             }
 
             // If we did not match on a collection key then we just set the new data to the state property
-            subscriber.withOnyxInstance.setState({
-                [subscriber.statePropertyName]: data,
+            subscriber.withOnyxInstance.setState((prevState) => {
+                const previousData = prevState[subscriber.statePropertyName];
+                if (previousData === data) {
+                    return null;
+                }
+
+                PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
+                return {
+                    [subscriber.statePropertyName]: data,
+                };
             });
             continue;
         }
@@ -439,6 +460,7 @@ function sendDataToConnection(config, val, matchedKey) {
     }
 
     if (config.withOnyxInstance) {
+        PerformanceUtils.logSetStateCall(config, null, val, 'sendDataToConnection');
         config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
     } else if (_.isFunction(config.callback)) {
         config.callback(val, matchedKey);
@@ -761,7 +783,9 @@ function applyMerge(key, data) {
     if (_.isObject(data) || _.every(mergeValues, _.isObject)) {
         // Object values are merged one after the other
         return _.reduce(mergeValues, (modifiedData, mergeValue) => {
-            const newData = mergeWithCustomized({}, modifiedData, mergeValue);
+            // lodash adds a small overhead so we don't use it here
+            // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+            const newData = Object.assign({}, fastMerge(modifiedData, mergeValue));
 
             // We will also delete any object keys that are undefined or null.
             // Deleting keys is not supported by AsyncStorage so we do it this way.
@@ -832,7 +856,7 @@ function initializeWithDefaultKeyStates() {
         .then((pairs) => {
             const asObject = _.object(pairs);
 
-            const merged = mergeWithCustomized(asObject, defaultKeyStates);
+            const merged = fastMerge(asObject, defaultKeyStates);
             cache.merge(merged);
             _.each(merged, (val, key) => keyChanged(key, val));
         });
@@ -986,6 +1010,7 @@ function update(data) {
  * of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop)
  * @param {String[]} [option.keysToDisableSyncEvents=[]] Contains keys for which
  * we want to disable sync event across tabs.
+ * @param {Boolean} [options.debugSetState] Enables debugging setState() calls to connected components.
  * @example
  * Onyx.init({
  *     keys: ONYXKEYS,
@@ -1002,6 +1027,7 @@ function init({
     captureMetrics = false,
     shouldSyncMultipleInstances = Boolean(global.localStorage),
     keysToDisableSyncEvents = [],
+    debugSetState = false,
 } = {}) {
     if (captureMetrics) {
         // The code here is only bundled and applied when the captureMetrics is set
@@ -1009,6 +1035,10 @@ function init({
         applyDecorators();
     }
 
+    if (debugSetState) {
+        PerformanceUtils.setShouldDebugSetState(true);
+    }
+
     if (maxCachedKeysCount > 0) {
         cache.setRecentKeysLimit(maxCachedKeysCount);
     }

package/lib/OnyxCache.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import mergeWithCustomized from './mergeWithCustomized';
+import fastMerge from './fastMerge';
 
 const isDefined = _.negate(_.isUndefined);
 
@@ -110,7 +110,9 @@ class OnyxCache {
      * @param {Record<string, *>} data - a map of (cache) key - values
      */
     merge(data) {
-        this.storageMap = mergeWithCustomized({}, this.storageMap, data);
+        // lodash adds a small overhead so we don't use it here
+        // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+        this.storageMap = Object.assign({}, fastMerge(this.storageMap, data));
 
         const storageKeys = this.getAllKeys();
         const mergedKeys = _.keys(data);

package/lib/fastMerge.js

@@ -0,0 +1,66 @@
+// Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
+
+/**
+ * @param {mixed} val
+ * @returns {boolean}
+*/
+function isMergeableObject(val) {
+    const nonNullObject = val != null ? typeof val === 'object' : false;
+    return (nonNullObject
+    && Object.prototype.toString.call(val) !== '[object RegExp]'
+    && Object.prototype.toString.call(val) !== '[object Date]');
+}
+
+/**
+ * @param {Object} target
+ * @param {Object} source
+ * @returns {Object}
+*/
+function mergeObject(target, source) {
+    const destination = {};
+    if (isMergeableObject(target)) {
+        // lodash adds a small overhead so we don't use it here
+        // eslint-disable-next-line rulesdir/prefer-underscore-method
+        const targetKeys = Object.keys(target);
+        for (let i = 0; i < targetKeys.length; ++i) {
+            const key = targetKeys[i];
+            destination[key] = target[key];
+        }
+    }
+
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    const sourceKeys = Object.keys(source);
+    for (let i = 0; i < sourceKeys.length; ++i) {
+        const key = sourceKeys[i];
+        if (source[key] === undefined) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        if (!isMergeableObject(source[key]) || !target[key]) {
+            destination[key] = source[key];
+        } else {
+            // eslint-disable-next-line no-use-before-define
+            destination[key] = fastMerge(target[key], source[key]);
+        }
+    }
+
+    return destination;
+}
+
+/**
+ * @param {Object|Array} target
+ * @param {Object|Array} source
+ * @returns {Object|Array}
+*/
+function fastMerge(target, source) {
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    const array = Array.isArray(source);
+    if (array) {
+        return source;
+    }
+    return mergeObject(target, source);
+}
+
+export default fastMerge;

package/lib/metrics/PerformanceUtils.js

@@ -0,0 +1,68 @@
+import lodashTransform from 'lodash/transform';
+import _ from 'underscore';
+
+let debugSetState = false;
+
+/**
+ * @param {Boolean} debug
+ */
+function setShouldDebugSetState(debug) {
+    debugSetState = debug;
+}
+
+/**
+ * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
+ * that state and props updates can be optimized.
+ *
+ * @param  {Object} object
+ * @param  {Object} base
+ * @return {Object}
+ */
+function diffObject(object, base) {
+    function changes(obj, comparisonObject) {
+        return lodashTransform(obj, (result, value, key) => {
+            if (_.isEqual(value, comparisonObject[key])) {
+                return;
+            }
+
+            // eslint-disable-next-line no-param-reassign
+            result[key] = (_.isObject(value) && _.isObject(comparisonObject[key]))
+                ? changes(value, comparisonObject[key])
+                : value;
+        });
+    }
+    return changes(object, base);
+}
+
+/**
+ * Provide insights into why a setState() call occurred by diffing the before and after values.
+ *
+ * @param {Object} mapping
+ * @param {*} previousValue
+ * @param {*} newValue
+ * @param {String} caller
+ * @param {String} [keyThatChanged]
+ */
+function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChanged) {
+    if (!debugSetState) {
+        return;
+    }
+
+    const logParams = {};
+    if (keyThatChanged) {
+        logParams.keyThatChanged = keyThatChanged;
+    }
+    if (_.isObject(newValue) && _.isObject(previousValue)) {
+        logParams.difference = diffObject(previousValue, newValue);
+    } else {
+        logParams.previousValue = previousValue;
+        logParams.newValue = newValue;
+    }
+
+    console.debug(`[Onyx-Debug] ${mapping.displayName} setState() called. Subscribed to key '${mapping.key}' (${caller})`, logParams);
+}
+
+export {
+    logSetStateCall,
+    setShouldDebugSetState,
+};

package/lib/storage/providers/LocalForage.js

@@ -7,7 +7,7 @@
 import localforage from 'localforage';
 import _ from 'underscore';
 import SyncQueue from '../../SyncQueue';
-import mergeWithCustomized from '../../mergeWithCustomized';
+import fastMerge from '../../fastMerge';
 
 localforage.config({
     name: 'OnyxDB',
@@ -24,7 +24,10 @@ const provider = {
             return localforage.getItem(key)
                 .then((existingValue) => {
                     const newValue = _.isObject(existingValue)
-                        ? mergeWithCustomized({}, existingValue, value)
+
+                        // lodash adds a small overhead so we don't use it here
+                        // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+                        ? Object.assign({}, fastMerge(existingValue, value))
                         : value;
                     return localforage.setItem(key, newValue);
                 });

package/lib/withOnyx.js

@@ -25,8 +25,8 @@ export default function (mapOnyxToState) {
         .omit(config => config.initWithStoredValues === false)
         .keys()
         .value();
-
     return (WrappedComponent) => {
+        const displayName = getDisplayName(WrappedComponent);
         class withOnyx extends React.Component {
             constructor(props) {
                 super(props);
@@ -152,6 +152,7 @@ export default function (mapOnyxToState) {
                     key,
                     statePropertyName,
                     withOnyxInstance: this,
+                    displayName,
                 });
             }
 
@@ -190,7 +191,7 @@ export default function (mapOnyxToState) {
         withOnyx.defaultProps = {
             forwardedRef: undefined,
         };
-        withOnyx.displayName = `withOnyx(${getDisplayName(WrappedComponent)})`;
+        withOnyx.displayName = `withOnyx(${displayName})`;
         return React.forwardRef((props, ref) => {
             const Component = withOnyx;
             // eslint-disable-next-line react/jsx-props-no-spreading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",

package/lib/mergeWithCustomized.js

@@ -1,26 +0,0 @@
-import lodashMergeWith from 'lodash/mergeWith';
-
-/**
- * When merging 2 objects into onyx that contain an array, we want to completely replace the array instead of the default
- * behavior which is to merge each item by its index.
- * ie:
- * merge({a: [1]}, {a: [2,3]}):
- *  - In the default implementation would produce {a:[1,3]}
- *  - With this function would produce: {a: [2,3]}
- * @param {*} objValue
- * @param {*} srcValue
- * @return {*}
- */
-// eslint-disable-next-line rulesdir/prefer-early-return
-function customizerForMergeWith(objValue, srcValue) {
-    // eslint-disable-next-line rulesdir/prefer-underscore-method
-    if (Array.isArray(objValue)) {
-        return srcValue;
-    }
-}
-
-function mergeWithCustomized(...args) {
-    return lodashMergeWith(...args, customizerForMergeWith);
-}
-
-export default mergeWithCustomized;