react-native-onyx 1.0.19 → 1.0.21

package/lib/Onyx.js

@@ -7,6 +7,7 @@ import * as Logger from './Logger';
 import cache from './OnyxCache';
 import createDeferredTask from './createDeferredTask';
 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;
@@ -261,7 +262,7 @@ function keysChanged(collectionKey, partialCollection) {
     // individual collection key member for the collection that is being updated. It is important to note that the collection parameter cane be a PARTIAL collection
     // and does not represent all of the combined keys and values for a collection key. It is just the "new" data that was merged in via mergeCollection().
     const stateMappingKeys = _.keys(callbackToStateMapping);
-    for (let i = stateMappingKeys.length; i--;) {
+    for (let i = 0; i < stateMappingKeys.length; i++) {
         const subscriber = callbackToStateMapping[stateMappingKeys[i]];
         if (!subscriber) {
             continue;
@@ -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,
+                    };
                 });
             }
         }
@@ -372,7 +383,7 @@ function keyChanged(key, data) {
     // notify them if the key that changed is a collection member. Or if it is a regular key notify them when there is an exact match. Depending on whether the subscriber
     // was connected via withOnyx we will call setState() directly on the withOnyx instance. If it is a regular connection we will pass the data to the provided callback.
     const stateMappingKeys = _.keys(callbackToStateMapping);
-    for (let i = stateMappingKeys.length; i--;) {
+    for (let i = 0; i < stateMappingKeys.length; i++) {
         const subscriber = callbackToStateMapping[stateMappingKeys[i]];
         if (!subscriber || !isKeyMatch(subscriber.key, key)) {
             continue;
@@ -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);
@@ -988,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,
@@ -1004,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
@@ -1011,6 +1035,10 @@ function init({
         applyDecorators();
     }
 
+    if (debugSetState) {
+        PerformanceUtils.setShouldDebugSetState(true);
+    }
+
     if (maxCachedKeysCount > 0) {
         cache.setRecentKeysLimit(maxCachedKeysCount);
     }

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/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.19",
+  "version": "1.0.21",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",