react-native-onyx 1.0.54 → 1.0.56

package/lib/Onyx.js

@@ -184,6 +184,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.
  *
@@ -848,19 +888,33 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
  *
  * @param {String} key
  * @param {*} value
+ * @param {Boolean} hasChanged
  * @param {String} method
  */
-function broadcastUpdate(key, value, method) {
+function broadcastUpdate(key, value, hasChanged, method) {
     // Logging properties only since values could be sensitive things we don't want to log
     Logger.logInfo(`${method}() called for key: ${key}${_.isObject(value) ? ` properties: ${_.keys(value).join(',')}` : ''}`);
 
     // Update subscribers if the cached value has changed, or when the subscriber specifically requires
     // all updates regardless of value changes (indicated by initWithStoredValues set to false).
-    const hasChanged = cache.hasValueChanged(key, value);
-    cache.set(key, value);
+    if (hasChanged) {
+        cache.set(key, value);
+    } else {
+        cache.addToAccessedKeys(key);
+    }
+
     notifySubscribersOnNextTick(key, value, subscriber => hasChanged || subscriber.initWithStoredValues === false);
 }
 
+/**
+ * @private
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasPendingMergeForKey(key) {
+    return Boolean(mergeQueue[key]);
+}
+
 /**
  * Write a value to our store with the given key
  *
@@ -874,8 +928,19 @@ function set(key, value) {
         return remove(key);
     }
 
+    if (hasPendingMergeForKey(key)) {
+        Logger.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
+    }
+
+    const hasChanged = cache.hasValueChanged(key, value);
+
     // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-    broadcastUpdate(key, value, 'set');
+    broadcastUpdate(key, value, hasChanged, 'set');
+
+    // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+    if (!hasChanged) {
+        return Promise.resolve();
+    }
 
     return Storage.setItem(key, value)
         .catch(error => evictStorageAndRetry(error, set, key, value));
@@ -918,11 +983,11 @@ function multiSet(data) {
  * Merges an array of changes with an existing value
  *
  * @private
- * @param {Array<*>} changes Array of changes that should be applied to the existing value
  * @param {*} existingValue
+ * @param {Array<*>} changes Array of changes that should be applied to the existing value
  * @returns {*}
  */
-function applyMerge(changes, existingValue) {
+function applyMerge(existingValue, changes) {
     const lastChange = _.last(changes);
 
     if (_.isArray(existingValue) || _.isArray(lastChange)) {
@@ -931,14 +996,10 @@ function applyMerge(changes, existingValue) {
 
     if (_.isObject(existingValue) || _.every(changes, _.isObject)) {
         // Object values are merged one after the other
-        return _.reduce(changes, (modifiedData, change) => {
-            // 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, change));
-
-            // Remove all first level keys that are explicitly set to null.
-            return _.omit(newData, value => _.isNull(value));
-        }, existingValue || {});
+        // lodash adds a small overhead so we don't use it here
+        // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+        return _.reduce(changes, (modifiedData, change) => fastMerge(modifiedData, change),
+            existingValue || {});
     }
 
     // If we have anything else we can't merge it so we'll
@@ -979,17 +1040,30 @@ function merge(key, changes) {
         .then((existingValue) => {
             try {
                 // We first only merge the changes, so we can provide these to the native implementation (SQLite uses only delta changes in "JSON_PATCH" to merge)
-                const batchedChanges = applyMerge(mergeQueue[key]);
+                const batchedChanges = applyMerge(undefined, mergeQueue[key]);
 
                 // Clean up the write queue so we
                 // don't apply these changes again
                 delete mergeQueue[key];
 
                 // After that we merge the batched changes with the existing value
-                const modifiedData = applyMerge([batchedChanges], existingValue);
+                let modifiedData = applyMerge(existingValue, [batchedChanges]);
+
+                // For objects, the key for null values needs to be removed from the object to ensure the value will get removed from storage completely.
+                // On native, SQLite will remove top-level keys that are null. To be consistent, we remove them on web too.
+                if (!_.isArray(modifiedData) && _.isObject(modifiedData)) {
+                    modifiedData = _.omit(modifiedData, value => _.isNull(value));
+                }
+
+                const hasChanged = cache.hasValueChanged(key, modifiedData);
 
                 // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-                broadcastUpdate(key, modifiedData, 'merge');
+                broadcastUpdate(key, modifiedData, hasChanged, 'merge');
+
+                // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+                if (!hasChanged) {
+                    return Promise.resolve();
+                }
 
                 return Storage.mergeItem(key, batchedChanges, modifiedData);
             } catch (error) {
@@ -1000,15 +1074,6 @@ function merge(key, changes) {
         });
 }
 
-/**
- * @private
- * @param {String} key
- * @returns {Boolean}
- */
-function hasPendingMergeForKey(key) {
-    return Boolean(mergeQueue[key]);
-}
-
 /**
  * Merge user provided default key value pairs.
  * @private
@@ -1328,6 +1393,7 @@ const Onyx = {
     isSafeEvictionKey,
     METHOD,
     setMemoryOnlyKeys,
+    tryGetCachedValue,
 };
 
 /**

package/lib/storage/__mocks__/index.js

@@ -4,9 +4,8 @@ import fastMerge from '../../fastMerge';
 let storageMapInternal = {};
 
 const set = jest.fn((key, value) => {
-    // eslint-disable-next-line no-param-reassign
     storageMapInternal[key] = value;
-    return Promise.resolve(storageMapInternal[key]);
+    return Promise.resolve(value);
 });
 
 const localForageMock = {

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