react-native-onyx 1.0.24 → 1.0.25

package/lib/Onyx.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-continue */
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
+import {deepEqual} from 'fast-equals';
 import lodashGet from 'lodash/get';
 import Storage from './storage';
 import * as Logger from './Logger';
@@ -35,6 +36,33 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = createDeferredTask();
 
+/**
+ * Uses a selector string or function to return a simplified version of sourceData
+ * @param {Mixed} sourceData
+ * @param {String|Function} selector
+ *      If it's a string, the selector is passed to lodashGet on the sourceData
+ *      If it's a function, it is passed the sourceData and it should return the simplified data
+ * @returns {Mixed}
+ */
+const getSubsetOfData = (sourceData, selector) => (_.isFunction(selector)
+    ? selector(sourceData)
+    : lodashGet(sourceData, selector));
+
+/**
+ * Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
+ * and runs it through a reducer function to return a subset of the data according to a selector.
+ * The resulting collection will only contain items that are returned by the selector.
+ * @param {Object} collection
+ * @param {String|Function} selector (see method docs for getSubsetOfData() for full details)
+ * @returns {Object}
+ */
+const reduceCollectionWithSelector = (collection, selector) => _.reduce(collection, (finalCollection, item, key) => {
+    // eslint-disable-next-line no-param-reassign
+    finalCollection[key] = getSubsetOfData(item, selector);
+
+    return finalCollection;
+}, {});
+
 /**
  * Get some data from the store
  *
@@ -322,6 +350,23 @@ function keysChanged(collectionKey, partialCollection) {
             // We are subscribed to a collection key so we must update the data in state with the new
             // collection member key values from the partial update.
             if (isSubscribedToCollectionKey) {
+                // If the subscriber has a selector, then the component's state must only be updated with the data
+                // returned by the selector.
+                if (subscriber.selector) {
+                    subscriber.withOnyxInstance.setState((prevState) => {
+                        const previousData = reduceCollectionWithSelector(prevState[subscriber.statePropertyName], subscriber.selector);
+                        const newData = reduceCollectionWithSelector(cachedCollection, subscriber.selector);
+
+                        if (!deepEqual(previousData, newData)) {
+                            return {
+                                [subscriber.statePropertyName]: newData,
+                            };
+                        }
+                        return null;
+                    });
+                    continue;
+                }
+
                 subscriber.withOnyxInstance.setState((prevState) => {
                     const finalCollection = _.clone(prevState[subscriber.statePropertyName] || {});
                     const dataKeys = _.keys(partialCollection);
@@ -347,6 +392,25 @@ function keysChanged(collectionKey, partialCollection) {
                     continue;
                 }
 
+                // If the subscriber has a selector, then the component's state must only be updated with the data
+                // returned by the selector and the state should only change when the subset of data changes from what
+                // it was previously.
+                if (subscriber.selector) {
+                    subscriber.withOnyxInstance.setState((prevState) => {
+                        const prevData = prevState[subscriber.statePropertyName];
+                        const newData = getSubsetOfData(cachedCollection[subscriber.key], subscriber.selector);
+                        if (!deepEqual(prevData, newData)) {
+                            PerformanceUtils.logSetStateCall(subscriber, prevData, newData, 'keysChanged', collectionKey);
+                            return {
+                                [subscriber.statePropertyName]: newData,
+                            };
+                        }
+
+                        return null;
+                    });
+                    continue;
+                }
+
                 subscriber.withOnyxInstance.setState((prevState) => {
                     const data = cachedCollection[subscriber.key];
                     const previousData = prevState[subscriber.statePropertyName];
@@ -410,6 +474,29 @@ function keyChanged(key, data, canUpdateSubscriber) {
         if (subscriber.withOnyxInstance) {
             // Check if we are subscribing to a collection key and overwrite the collection member key value in state
             if (isCollectionKey(subscriber.key)) {
+                // If the subscriber has a selector, then the consumer of this data must only be given the data
+                // returned by the selector and only when the selected data has changed.
+                if (subscriber.selector) {
+                    subscriber.withOnyxInstance.setState((prevState) => {
+                        const prevData = prevState[subscriber.statePropertyName];
+                        const newData = {
+                            [key]: getSubsetOfData(data, subscriber.selector),
+                        };
+                        const prevDataWithNewData = {
+                            ...prevData,
+                            [key]: getSubsetOfData(data, subscriber.selector),
+                        };
+                        if (!deepEqual(prevData, prevDataWithNewData)) {
+                            PerformanceUtils.logSetStateCall(subscriber, prevData, newData, 'keyChanged', key);
+                            return {
+                                [subscriber.statePropertyName]: prevDataWithNewData,
+                            };
+                        }
+                        return null;
+                    });
+                    continue;
+                }
+
                 subscriber.withOnyxInstance.setState((prevState) => {
                     const collection = prevState[subscriber.statePropertyName] || {};
                     const newCollection = {
@@ -424,6 +511,22 @@ function keyChanged(key, data, canUpdateSubscriber) {
                 continue;
             }
 
+            // If the subscriber has a selector, then the component's state must only be updated with the data
+            // returned by the selector and only if the selected data has changed.
+            if (subscriber.selector) {
+                subscriber.withOnyxInstance.setState((prevState) => {
+                    const previousValue = getSubsetOfData(prevState, subscriber.selector);
+                    const newValue = getSubsetOfData(data, subscriber.selector);
+                    if (!deepEqual(previousValue, newValue)) {
+                        return {
+                            [subscriber.statePropertyName]: newValue,
+                        };
+                    }
+                    return null;
+                });
+                continue;
+            }
+
             // If we did not match on a collection key then we just set the new data to the state property
             subscriber.withOnyxInstance.setState((prevState) => {
                 const previousData = prevState[subscriber.statePropertyName];
@@ -449,25 +552,41 @@ function keyChanged(key, data, canUpdateSubscriber) {
  *     - triggers the callback function
  *
  * @private
- * @param {object} config
- * @param {object} [config.withOnyxInstance]
- * @param {string} [config.statePropertyName]
- * @param {function} [config.callback]
+ * @param {Object} mapping
+ * @param {Object} [mapping.withOnyxInstance]
+ * @param {String} [mapping.statePropertyName]
+ * @param {Function} [mapping.callback]
+ * @param {String} [mapping.selector]
  * @param {*|null} val
  * @param {String} matchedKey
  */
-function sendDataToConnection(config, val, matchedKey) {
+function sendDataToConnection(mapping, val, matchedKey) {
     // If the mapping no longer exists then we should not send any data.
     // This means our subscriber disconnected or withOnyx wrapped component unmounted.
-    if (!callbackToStateMapping[config.connectionID]) {
+    if (!callbackToStateMapping[mapping.connectionID]) {
+        return;
+    }
+
+    if (mapping.withOnyxInstance) {
+        let newData = val;
+
+        // If the mapping has a selector, then the component's state must only be updated with the data
+        // returned by the selector.
+        if (mapping.selector) {
+            if (isCollectionKey(mapping.key)) {
+                newData = reduceCollectionWithSelector(val, mapping.selector);
+            } else {
+                newData = getSubsetOfData(val, mapping.selector);
+            }
+        }
+
+        PerformanceUtils.logSetStateCall(mapping, null, newData, 'sendDataToConnection');
+        mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
         return;
     }
 
-    if (config.withOnyxInstance) {
-        PerformanceUtils.logSetStateCall(config, null, val, 'sendDataToConnection');
-        config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
-    } else if (_.isFunction(config.callback)) {
-        config.callback(val, matchedKey);
+    if (_.isFunction(mapping.callback)) {
+        mapping.callback(val, matchedKey);
     }
 }
 
@@ -534,6 +653,7 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  * @param {Boolean} [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
  *  component
  * @param {Boolean} [mapping.waitForCollectionCallback] If set to true, it will return the entire collection to the callback as a single object
+ * @param {String|Function} [mapping.selector] THIS PARAM IS ONLY USED WITH withOnyx(). If included, this will be used to subscribe to a subset of an Onyx key's data. If the selector is a string, the selector is passed to lodashGet on the sourceData. If the selector is a function, the sourceData is passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive performance benefits because the component will only re-render when the subset of data changes. Otherwise, any change of data on any property would normally cause the component to re-render (and that can be expensive from a performance standpoint).
  * @returns {Number} an ID to use when calling disconnect
  */
 function connect(mapping) {

package/package.json

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