react-native-onyx 1.0.56 → 1.0.58

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'}})
@@ -706,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) {
@@ -915,6 +909,24 @@ function hasPendingMergeForKey(key) {
     return Boolean(mergeQueue[key]);
 }
 
+/**
+ * We generally want to remove top-level nullish values from objects written to disk and cache, because it decreases the amount of data stored in memory and on disk.
+ * On native, when merging an existing value with new changes, SQLite will use  JSON_PATCH, which removes top-level nullish values.
+ * To be consistent with the behaviour for merge, we'll also want to remove nullish values for "set" operations.
+ * On web, IndexedDB will keep the top-level keys along with a null value and this uses up storage and memory.
+ * This method will ensure that keys for null values are removed before an object is written to disk and cache so that all platforms are storing the data in the same efficient way.
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function removeNullObjectValues(value) {
+    if (_.isArray(value) || !_.isObject(value)) {
+        return value;
+    }
+
+    return _.omit(value, objectValue => _.isNull(objectValue));
+}
+
 /**
  * Write a value to our store with the given key
  *
@@ -932,18 +944,20 @@ function set(key, value) {
         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);
+    const valueWithNullRemoved = removeNullObjectValues(value);
+
+    const hasChanged = cache.hasValueChanged(key, valueWithNullRemoved);
 
     // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-    broadcastUpdate(key, value, hasChanged, 'set');
+    broadcastUpdate(key, valueWithNullRemoved, 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));
+    return Storage.setItem(key, valueWithNullRemoved)
+        .catch(error => evictStorageAndRetry(error, set, key, valueWithNullRemoved));
 }
 
 /**
@@ -1040,19 +1054,21 @@ 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(undefined, mergeQueue[key]);
+                let 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
-                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 modifiedData = removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
+
+                // On native platforms we use SQLite which utilises JSON_PATCH to merge changes.
+                // JSON_PATCH generally removes top-level nullish values from the stored object.
+                // When there is no existing value though, SQLite will just insert the changes as a new value and thus the top-level nullish values won't be removed.
+                // Therefore we need to remove nullish values from the `batchedChanges` which are sent to the SQLite, if no existing value is present.
+                if (!existingValue) {
+                    batchedChanges = removeNullObjectValues(batchedChanges);
                 }
 
                 const hasChanged = cache.hasValueChanged(key, modifiedData);
@@ -1382,7 +1398,6 @@ const Onyx = {
     multiSet,
     merge,
     mergeCollection,
-    hasPendingMergeForKey,
     update,
     clear,
     getAllKeys,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "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": {