react-native-onyx 1.0.55 → 1.0.57

package/lib/Onyx.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-continue */
 import {deepEqual} from 'fast-equals';
-import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import * as Logger from './Logger';
 import cache from './OnyxCache';
@@ -48,17 +47,13 @@ let defaultKeyStates = {};
 const deferredInitTask = createDeferredTask();
 
 /**
- * Uses a selector string or function to return a simplified version of sourceData
+ * Uses a selector function to return a simplified version of sourceData
  * @param {Mixed} sourceData
- * @param {String|Function} selector
+ * @param {Function} selector Function that takes sourceData and returns a simplified version of it
  * @param {Object} [withOnyxInstanceState]
- *      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, withOnyxInstanceState) => (_.isFunction(selector)
-    ? selector(sourceData, withOnyxInstanceState)
-    : lodashGet(sourceData, selector));
+const getSubsetOfData = (sourceData, selector, withOnyxInstanceState) => selector(sourceData, withOnyxInstanceState);
 
 /**
  * Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
@@ -184,6 +179,46 @@ function isSafeEvictionKey(testKey) {
     return _.some(evictionAllowList, key => isKeyMatch(key, testKey));
 }
 
+/**
+ * Tries to get a value from the cache. If the value is not present in cache it will return the default value or undefined.
+ * If the requested key is a collection, it will return an object with all the collection members.
+ *
+ * @param {String} key
+ * @param {Object} mapping
+ * @returns {Mixed}
+ */
+function tryGetCachedValue(key, mapping = {}) {
+    let val = cache.getValue(key);
+
+    if (isCollectionKey(key)) {
+        const allKeys = cache.getAllKeys();
+        const matchingKeys = _.filter(allKeys, k => k.startsWith(key));
+        const values = _.reduce(matchingKeys, (finalObject, matchedKey) => {
+            const cachedValue = cache.getValue(matchedKey);
+            if (cachedValue) {
+                // This is permissible because we're in the process of constructing the final object in a reduce function.
+                // eslint-disable-next-line no-param-reassign
+                finalObject[matchedKey] = cachedValue;
+            }
+            return finalObject;
+        }, {});
+        if (_.isEmpty(values)) {
+            return;
+        }
+        val = values;
+    }
+
+    if (mapping.selector) {
+        const state = mapping.withOnyxInstance ? mapping.withOnyxInstance.state : undefined;
+        if (isCollectionKey(key)) {
+            return reduceCollectionWithSelector(val, mapping.selector, state);
+        }
+        return getSubsetOfData(val, mapping.selector, state);
+    }
+
+    return val;
+}
+
 /**
  * Remove a key from the recently accessed key list.
  *
@@ -666,11 +701,10 @@ 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 and withOnyx state are
- *       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).
+ * @param {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.
+ *       The sourceData and withOnyx state are 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) {
@@ -1353,6 +1387,7 @@ const Onyx = {
     isSafeEvictionKey,
     METHOD,
     setMemoryOnlyKeys,
+    tryGetCachedValue,
 };
 
 /**

package/lib/withOnyx.js

@@ -37,13 +37,25 @@ export default function (mapOnyxToState) {
                 // disconnected. It is a key value store with the format {[mapping.key]: connectionID}.
                 this.activeConnectionIDs = {};
 
+                const cachedState = _.reduce(mapOnyxToState, (resultObj, mapping, propertyName) => {
+                    const key = Str.result(mapping.key, props);
+                    const value = Onyx.tryGetCachedValue(key, mapping);
+
+                    if (value !== undefined) {
+                        // eslint-disable-next-line no-param-reassign
+                        resultObj[propertyName] = value;
+                    }
+
+                    return resultObj;
+                }, {});
+
+                // If we have all the data we need, then we can render the component immediately
+                cachedState.loading = _.size(cachedState) < requiredKeysForInit.length;
+
                 // Object holding the temporary initial state for the component while we load the various Onyx keys
-                this.tempState = {};
+                this.tempState = cachedState;
 
-                this.state = {
-                    // If there are no required keys for init then we can render the wrapped component immediately
-                    loading: requiredKeysForInit.length > 0,
-                };
+                this.state = cachedState;
             }
 
             componentDidMount() {
@@ -60,7 +72,6 @@ export default function (mapOnyxToState) {
                 _.each(mapOnyxToState, (mapping, propertyName) => {
                     const previousKey = Str.result(mapping.key, prevProps);
                     const newKey = Str.result(mapping.key, this.props);
-
                     if (previousKey !== newKey) {
                         Onyx.disconnect(this.activeConnectionIDs[previousKey], previousKey);
                         delete this.activeConnectionIDs[previousKey];
@@ -88,6 +99,16 @@ export default function (mapOnyxToState) {
              * @param {*} val
              */
             setWithOnyxState(statePropertyName, val) {
+                // We might have loaded the values for the onyx keys/mappings already from the cache.
+                // In case we were able to load all the values upfront, the loading state will be false.
+                // However, Onyx.js will always call setWithOnyxState, as it doesn't know that this implementation
+                // already loaded the values from cache. Thus we have to check whether the value has changed
+                // before we set the state to prevent unnecessary renders.
+                const prevValue = this.state[statePropertyName];
+                if (!this.state.loading && prevValue === val) {
+                    return;
+                }
+
                 if (!this.state.loading) {
                     this.setState({[statePropertyName]: val});
                     return;
@@ -100,7 +121,14 @@ export default function (mapOnyxToState) {
                     return;
                 }
 
-                this.setState({...this.tempState, loading: false});
+                const stateUpdate = {...this.tempState, loading: false};
+
+                // The state is set here manually, instead of using setState because setState is an async operation, meaning it might execute on the next tick,
+                // or at a later point in the microtask queue. That can lead to a race condition where
+                // setWithOnyxState is called before the state is actually set. This results in unreliable behavior when checking the loading state and has been mainly observed on fabric.
+                this.state = stateUpdate;
+
+                this.setState(stateUpdate); // Trigger a render
                 delete this.tempState;
             }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -41,7 +41,6 @@
   "dependencies": {
     "ascii-table": "0.0.9",
     "fast-equals": "^4.0.3",
-    "lodash": "^4.17.21",
     "underscore": "^1.13.1"
   },
   "devDependencies": {