react-native-onyx 1.0.81 → 1.0.83

package/lib/Onyx.js

@@ -5,10 +5,9 @@ import * as Logger from './Logger';
 import cache from './OnyxCache';
 import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
-import fastMerge from './fastMerge';
 import * as PerformanceUtils from './metrics/PerformanceUtils';
 import Storage from './storage';
-import Utils from './utils';
+import utils from './utils';
 import unstable_batchedUpdates from './batch';
 
 // Method constants
@@ -415,7 +414,7 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
                 // 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) => {
+                    subscriber.withOnyxInstance.setStateProxy((prevState) => {
                         const previousData = prevState[subscriber.statePropertyName];
                         const newData = reduceCollectionWithSelector(cachedCollection, subscriber.selector, subscriber.withOnyxInstance.state);
 
@@ -429,7 +428,7 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
                     continue;
                 }
 
-                subscriber.withOnyxInstance.setState((prevState) => {
+                subscriber.withOnyxInstance.setStateProxy((prevState) => {
                     const finalCollection = _.clone(prevState[subscriber.statePropertyName] || {});
                     const dataKeys = _.keys(partialCollection);
                     for (let j = 0; j < dataKeys.length; j++) {
@@ -458,7 +457,7 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
                 // 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) => {
+                    subscriber.withOnyxInstance.setStateProxy((prevState) => {
                         const prevData = prevState[subscriber.statePropertyName];
                         const newData = getSubsetOfData(cachedCollection[subscriber.key], subscriber.selector, subscriber.withOnyxInstance.state);
                         if (!deepEqual(prevData, newData)) {
@@ -473,9 +472,14 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
                     continue;
                 }
 
-                subscriber.withOnyxInstance.setState((prevState) => {
+                subscriber.withOnyxInstance.setStateProxy((prevState) => {
                     const data = cachedCollection[subscriber.key];
                     const previousData = prevState[subscriber.statePropertyName];
+
+                    // Avoids triggering unnecessary re-renders when feeding empty objects
+                    if (utils.areObjectsEmpty(data, previousData)) {
+                        return null;
+                    }
                     if (data === previousData) {
                         return null;
                     }
@@ -548,7 +552,7 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
                 // 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) => {
+                    subscriber.withOnyxInstance.setStateProxy((prevState) => {
                         const prevData = prevState[subscriber.statePropertyName];
                         const newData = {
                             [key]: getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state),
@@ -568,7 +572,7 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
                     continue;
                 }
 
-                subscriber.withOnyxInstance.setState((prevState) => {
+                subscriber.withOnyxInstance.setStateProxy((prevState) => {
                     const collection = prevState[subscriber.statePropertyName] || {};
                     const newCollection = {
                         ...collection,
@@ -585,7 +589,7 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
             // 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) => {
+                subscriber.withOnyxInstance.setStateProxy((prevState) => {
                     const previousValue = getSubsetOfData(prevState[subscriber.statePropertyName], subscriber.selector, subscriber.withOnyxInstance.state);
                     const newValue = getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state);
                     if (!deepEqual(previousValue, newValue)) {
@@ -599,8 +603,13 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
             }
 
             // If we did not match on a collection key then we just set the new data to the state property
-            subscriber.withOnyxInstance.setState((prevState) => {
+            subscriber.withOnyxInstance.setStateProxy((prevState) => {
                 const previousData = prevState[subscriber.statePropertyName];
+
+                // Avoids triggering unnecessary re-renders when feeding empty objects
+                if (utils.areObjectsEmpty(data, previousData)) {
+                    return null;
+                }
                 if (previousData === data) {
                     return null;
                 }
@@ -728,6 +737,9 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  *       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 {String | Number | Boolean | Object} [mapping.initialValue] THIS PARAM IS ONLY USED WITH withOnyx().
+ * If included, this will be passed to the component so that something can be rendered while data is being fetched from the DB.
+ * Note that it will not cause the component to have the loading prop set to true. |
  * @returns {Number} an ID to use when calling disconnect
  */
 function connect(mapping) {
@@ -1008,7 +1020,7 @@ 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 valueWithNullRemoved = Utils.removeNullObjectValues(value);
+    const valueWithNullRemoved = utils.removeNullObjectValues(value);
 
     const hasChanged = cache.hasValueChanged(key, valueWithNullRemoved);
 
@@ -1078,7 +1090,7 @@ function applyMerge(existingValue, changes) {
         // Object values are merged one after the other
         // 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),
+        return _.reduce(changes, (modifiedData, change) => utils.fastMerge(modifiedData, change),
             existingValue || {});
     }
 
@@ -1127,14 +1139,14 @@ function merge(key, changes) {
                 delete mergeQueuePromise[key];
 
                 // After that we merge the batched changes with the existing value
-                const modifiedData = Utils.removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
+                const modifiedData = utils.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 = Utils.removeNullObjectValues(batchedChanges);
+                    batchedChanges = utils.removeNullObjectValues(batchedChanges);
                 }
 
                 const hasChanged = cache.hasValueChanged(key, modifiedData);
@@ -1168,7 +1180,7 @@ function initializeWithDefaultKeyStates() {
         .then((pairs) => {
             const asObject = _.object(pairs);
 
-            const merged = fastMerge(asObject, defaultKeyStates);
+            const merged = utils.fastMerge(asObject, defaultKeyStates);
             cache.merge(merged);
             _.each(merged, (val, key) => keyChanged(key, val));
         });

package/lib/OnyxCache.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import {deepEqual} from 'fast-equals';
-import fastMerge from './fastMerge';
+import utils from './utils';
 
 const isDefined = _.negate(_.isUndefined);
 
@@ -119,7 +119,7 @@ class OnyxCache {
 
         // lodash adds a small overhead so we don't use it here
         // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-        this.storageMap = Object.assign({}, fastMerge(this.storageMap, data));
+        this.storageMap = Object.assign({}, utils.fastMerge(this.storageMap, data));
 
         const storageKeys = this.getAllKeys();
         const mergedKeys = _.keys(data);

package/lib/storage/__mocks__/index.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import fastMerge from '../../fastMerge';
+import utils from '../../utils';
 
 let storageMapInternal = {};
 
@@ -27,7 +27,7 @@ const idbKeyvalMock = {
         _.forEach(pairs, ([key, value]) => {
             const existingValue = storageMapInternal[key];
             const newValue = _.isObject(existingValue)
-                ? fastMerge(existingValue, value) : value;
+                ? utils.fastMerge(existingValue, value) : value;
 
             set(key, newValue);
         });

package/lib/storage/providers/IDBKeyVal.js

@@ -11,8 +11,7 @@ import {
     promisifyRequest,
 } from 'idb-keyval';
 import _ from 'underscore';
-import fastMerge from '../../fastMerge';
-import Utils from '../../utils';
+import utils from '../../utils';
 
 // We don't want to initialize the store while the JS bundle loads as idb-keyval will try to use global.indexedDB
 // which might not be available in certain environments that load the bundle (e.g. electron main process).
@@ -56,8 +55,8 @@ const provider = {
         return getValues.then((values) => {
             const upsertMany = _.map(pairs, ([key, value], index) => {
                 const prev = values[index];
-                const newValue = _.isObject(prev) ? fastMerge(prev, value) : value;
-                return promisifyRequest(store.put(Utils.removeNullObjectValues(newValue), key));
+                const newValue = _.isObject(prev) ? utils.fastMerge(prev, value) : value;
+                return promisifyRequest(store.put(utils.removeNullObjectValues(newValue), key));
             });
             return Promise.all(upsertMany);
         });

package/lib/utils.js

@@ -1,4 +1,77 @@
-import _ from 'underscore';
+import * as _ from 'underscore';
+
+function areObjectsEmpty(a, b) {
+    return (
+        typeof a === 'object'
+        && typeof b === 'object'
+        && _.isEmpty(a)
+        && _.isEmpty(b)
+    );
+}
+
+// Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
+
+/**
+ * @param {mixed} val
+ * @returns {boolean}
+*/
+function isMergeableObject(val) {
+    const nonNullObject = val != null ? typeof val === 'object' : false;
+    return (nonNullObject
+  && Object.prototype.toString.call(val) !== '[object RegExp]'
+  && Object.prototype.toString.call(val) !== '[object Date]');
+}
+
+/**
+* @param {Object} target
+* @param {Object} source
+* @returns {Object}
+*/
+function mergeObject(target, source) {
+    const destination = {};
+    if (isMergeableObject(target)) {
+        // lodash adds a small overhead so we don't use it here
+        // eslint-disable-next-line rulesdir/prefer-underscore-method
+        const targetKeys = Object.keys(target);
+        for (let i = 0; i < targetKeys.length; ++i) {
+            const key = targetKeys[i];
+            destination[key] = target[key];
+        }
+    }
+
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    const sourceKeys = Object.keys(source);
+    for (let i = 0; i < sourceKeys.length; ++i) {
+        const key = sourceKeys[i];
+        if (source[key] === undefined) {
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        if (!isMergeableObject(source[key]) || !target[key]) {
+            destination[key] = source[key];
+        } else {
+            // eslint-disable-next-line no-use-before-define
+            destination[key] = fastMerge(target[key], source[key]);
+        }
+    }
+
+    return destination;
+}
+
+/**
+* @param {Object|Array} target
+* @param {Object|Array} source
+* @returns {Object|Array}
+*/
+function fastMerge(target, source) {
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    if (_.isArray(source) || _.isNull(source) || _.isUndefined(source)) {
+        return source;
+    }
+    return mergeObject(target, source);
+}
 
 /**
  * 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.
@@ -20,4 +93,5 @@ function removeNullObjectValues(value) {
     return objectWithoutNullObjectValues;
 }
 
-export default {removeNullObjectValues};
+export default {removeNullObjectValues, areObjectsEmpty, fastMerge};
+

package/lib/withOnyx.d.ts

@@ -148,6 +148,7 @@ declare function withOnyx<TComponentProps, TOnyxProps>(
             | OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp>
             | OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp>;
     },
+    shouldDelayUpdates?: boolean,
 ): (component: React.ComponentType<TComponentProps>) => React.ComponentType<Omit<TComponentProps, keyof TOnyxProps>>;
 
 export default withOnyx;

package/lib/withOnyx.js

@@ -8,6 +8,7 @@ import React from 'react';
 import _ from 'underscore';
 import Onyx from './Onyx';
 import * as Str from './Str';
+import utils from './utils';
 
 /**
  * Returns the display name of a component
@@ -19,7 +20,7 @@ function getDisplayName(component) {
     return component.displayName || component.name || 'Component';
 }
 
-export default function (mapOnyxToState) {
+export default function (mapOnyxToState, shouldDelayUpdates = false) {
     // A list of keys that must be present in tempState before we can render the WrappedComponent
     const requiredKeysForInit = _.chain(mapOnyxToState)
         .omit(config => config.initWithStoredValues === false)
@@ -28,37 +29,51 @@ export default function (mapOnyxToState) {
     return (WrappedComponent) => {
         const displayName = getDisplayName(WrappedComponent);
         class withOnyx extends React.Component {
+            pendingSetStates = [];
+
             constructor(props) {
                 super(props);
-
+                this.shouldDelayUpdates = shouldDelayUpdates;
                 this.setWithOnyxState = this.setWithOnyxState.bind(this);
+                this.flushPendingSetStates = this.flushPendingSetStates.bind(this);
 
                 // This stores all the Onyx connection IDs to be used when the component unmounts so everything can be
                 // 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 we have a pending merge for a key it could mean that data is being set via Onyx.merge() and someone expects a component to have this data immediately.
-                     *
-                     * @example
-                     *
-                     * Onyx.merge('report_123', value);
-                     * Navigation.navigate(route); // Where "route" expects the "value" to be available immediately once rendered.
-                     *
-                     * In reality, Onyx.merge() will only update the subscriber after all merges have been batched and the previous value is retrieved via a get() (returns a promise).
-                     * So, we won't use the cache optimization here as it will lead us to arbitrarily defer various actions in the application code.
-                     */
-                    if (value !== undefined && !Onyx.hasPendingMergeForKey(key)) {
-                        // eslint-disable-next-line no-param-reassign
-                        resultObj[propertyName] = value;
-                    }
+                const cachedState = _.reduce(
+                    mapOnyxToState,
+                    (resultObj, mapping, propertyName) => {
+                        const key = Str.result(mapping.key, props);
+                        let value = Onyx.tryGetCachedValue(key, mapping);
+                        if (!value && mapping.initialValue) {
+                            value = mapping.initialValue;
+                        }
 
-                    return resultObj;
-                }, {});
+                        /**
+                         * If we have a pending merge for a key it could mean that data is being set via Onyx.merge() and someone expects a component to have this data immediately.
+                         *
+                         * @example
+                         *
+                         * Onyx.merge('report_123', value);
+                         * Navigation.navigate(route); // Where "route" expects the "value" to be available immediately once rendered.
+                         *
+                         * In reality, Onyx.merge() will only update the subscriber after all merges have been batched and the previous value is retrieved via a get() (returns a promise).
+                         * So, we won't use the cache optimization here as it will lead us to arbitrarily defer various actions in the application code.
+                         */
+                        if (
+                            (value !== undefined
+                                && !Onyx.hasPendingMergeForKey(key))
+                            || mapping.allowStaleData
+                        ) {
+                            // 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;
@@ -101,47 +116,86 @@ export default function (mapOnyxToState) {
                 });
             }
 
+            setStateProxy(modifier) {
+                if (this.shouldDelayUpdates) {
+                    this.pendingSetStates.push(modifier);
+                } else {
+                    this.setState(modifier);
+                }
+            }
+
             /**
-             * This method is used externally by sendDataToConnection to prevent unnecessary renders while a component
-             * still in a loading state. The temporary initial state is saved to the component instance and setState()
+             * This method is used by the internal raw Onyx `sendDataToConnection`, it is designed to prevent unnecessary renders while a component
+             * still in a "loading" (read "mounting") state. The temporary initial state is saved to the HOC instance and setState()
              * only called once all the necessary data has been collected.
              *
+             * There is however the possibility the component could have been updated by a call to setState()
+             * before the data was "initially" collected. A race condition.
+             * For example some update happened on some key, while onyx was still gathering the initial hydration data.
+             * This update is disptached directly to setStateProxy and therefore the component has the most up-to-date data
+             *
+             * This is a design flaw in Onyx itself as dispatching updates before initial hydration is not a correct event flow.
+             * We however need to workaround this issue in the HOC. The addition of initialValue makes things even more complex,
+             * since you cannot be really sure if the component has been updated before or after the initial hydration. Therefore if
+             * initialValue is there, we just check if the update is different than that and then try to handle it as best as we can.
+             *
              * @param {String} statePropertyName
              * @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 the component is not loading (read "mounting"), then we can just update the state
                 if (!this.state.loading) {
-                    this.setState({[statePropertyName]: val});
+                    // Performance optimization, do not trigger update with same values
+                    if (prevValue === val || utils.areObjectsEmpty(prevValue, val)) {
+                        return;
+                    }
+
+                    this.setStateProxy({[statePropertyName]: val});
                     return;
                 }
 
                 this.tempState[statePropertyName] = val;
 
-                // All state keys should exist and at least have a value of null
-                if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) {
+                // If some key does not have a value yet, do not update the state yet
+                const tempStateIsMissingKey = _.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]));
+                if (tempStateIsMissingKey) {
                     return;
                 }
 
-                // Leave untouched previous state to avoid data loss during pre-load updates.
-                // This handles case when setState was called before the setWithOnyxState.
-                // For example, when an Onyx property was updated by keyChanged before the call of the setWithOnyxState.
+                const stateUpdate = {...this.tempState};
+                delete this.tempState;
+
+                // Full of hacky workarounds to prevent the race condition described above.
                 this.setState((prevState) => {
-                    const remainingTempState = _.omit(this.tempState, _.keys(prevState));
+                    const finalState = _.reduce(stateUpdate, (result, value, key) => {
+                        if (key === 'loading') {
+                            return result;
+                        }
 
-                    return ({...remainingTempState, loading: false});
-                });
+                        const initialValue = mapOnyxToState[key].initialValue;
 
-                delete this.tempState;
+                        // If initialValue is there and the state contains something different it means
+                        // an update has already been received and we can discard the value we are trying to hydrate
+                        if (!_.isUndefined(initialValue) && !_.isUndefined(prevState[key]) && prevState[key] !== initialValue) {
+                            // eslint-disable-next-line no-param-reassign
+                            result[key] = prevState[key];
+
+                            // if value is already there (without initial value) then we can discard the value we are trying to hydrate
+                        } else if (!_.isUndefined(prevState[key])) {
+                            // eslint-disable-next-line no-param-reassign
+                            result[key] = prevState[key];
+                        } else {
+                            // eslint-disable-next-line no-param-reassign
+                            result[key] = value;
+                        }
+                        return result;
+                    }, {});
+
+                    finalState.loading = false;
+                    return finalState;
+                });
             }
 
             /**
@@ -196,7 +250,23 @@ export default function (mapOnyxToState) {
                 });
             }
 
+            flushPendingSetStates() {
+                if (!this.shouldDelayUpdates) {
+                    return;
+                }
+
+                this.shouldDelayUpdates = false;
+
+                this.pendingSetStates.forEach((modifier) => {
+                    this.setState(modifier);
+                });
+                this.pendingSetStates = [];
+            }
+
             render() {
+                // Remove any null values so that React replaces them with default props
+                const propsToPass = _.omit(this.props, _.isNull);
+
                 if (this.state.loading) {
                     return null;
                 }
@@ -204,14 +274,12 @@ export default function (mapOnyxToState) {
                 // Remove any internal state properties used by withOnyx
                 // that should not be passed to a wrapped component
                 let stateToPass = _.omit(this.state, 'loading');
-                stateToPass = _.omit(stateToPass, value => _.isNull(value));
-
-                // Remove any null values so that React replaces them with default props
-                const propsToPass = _.omit(this.props, value => _.isNull(value));
+                stateToPass = _.omit(stateToPass, _.isNull);
 
                 // Spreading props and state is necessary in an HOC where the data cannot be predicted
                 return (
                     <WrappedComponent
+                        markReadyForHydration={this.flushPendingSetStates}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...propsToPass}
                         // eslint-disable-next-line react/jsx-props-no-spreading

package/package.json

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