react-native-onyx 1.0.119 → 1.0.121

package/lib/Onyx.js

@@ -7,6 +7,8 @@ import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
 import * as PerformanceUtils from './metrics/PerformanceUtils';
 import Storage from './storage';
+import * as Broadcast from './broadcast';
+import * as ActiveClientManager from './ActiveClientManager';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
 
@@ -19,6 +21,8 @@ const METHOD = {
     CLEAR: 'clear',
 };
 
+const ON_CLEAR = 'on_clear';
+
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
 const mergeQueuePromise = {};
@@ -49,6 +53,12 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = createDeferredTask();
 
+// The promise of the clear function, saved so that no writes happen while it's executing
+let isClearing = false;
+
+// Callback to be executed after the clear execution ends
+let onClearCallback = null;
+
 let batchUpdatesPromise = null;
 let batchUpdatesQueue = [];
 
@@ -108,12 +118,17 @@ const getSubsetOfData = (sourceData, selector, withOnyxInstanceState) => selecto
  * @param {Object} [withOnyxInstanceState]
  * @returns {Object}
  */
-const reduceCollectionWithSelector = (collection, selector, withOnyxInstanceState) => _.reduce(collection, (finalCollection, item, key) => {
-    // eslint-disable-next-line no-param-reassign
-    finalCollection[key] = getSubsetOfData(item, selector, withOnyxInstanceState);
+const reduceCollectionWithSelector = (collection, selector, withOnyxInstanceState) =>
+    _.reduce(
+        collection,
+        (finalCollection, item, key) => {
+            // eslint-disable-next-line no-param-reassign
+            finalCollection[key] = getSubsetOfData(item, selector, withOnyxInstanceState);
 
-    return finalCollection;
-}, {});
+            return finalCollection;
+        },
+        {},
+    );
 
 /**
  * Get some data from the store
@@ -141,7 +156,7 @@ function get(key) {
             cache.set(key, val);
             return val;
         })
-        .catch(err => Logger.logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
+        .catch((err) => Logger.logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
 
     return cache.captureTask(taskName, promise);
 }
@@ -166,11 +181,10 @@ function getAllKeys() {
     }
 
     // Otherwise retrieve the keys from storage and capture a promise to aid concurrent usages
-    const promise = Storage.getAllKeys()
-        .then((keys) => {
-            _.each(keys, key => cache.addKey(key));
-            return keys;
-        });
+    const promise = Storage.getAllKeys().then((keys) => {
+        _.each(keys, (key) => cache.addKey(key));
+        return keys;
+    });
 
     return cache.captureTask(taskName, promise);
 }
@@ -206,9 +220,7 @@ function isCollectionMemberKey(collectionKey, key) {
  * @return {Boolean}
  */
 function isKeyMatch(configKey, key) {
-    return isCollectionKey(configKey)
-        ? Str.startsWith(key, configKey)
-        : configKey === key;
+    return isCollectionKey(configKey) ? Str.startsWith(key, configKey) : configKey === key;
 }
 
 /**
@@ -220,7 +232,7 @@ function isKeyMatch(configKey, key) {
  * @returns {Boolean}
  */
 function isSafeEvictionKey(testKey) {
-    return _.some(evictionAllowList, key => isKeyMatch(key, testKey));
+    return _.some(evictionAllowList, (key) => isKeyMatch(key, testKey));
 }
 
 /**
@@ -242,16 +254,20 @@ function tryGetCachedValue(key, mapping = {}) {
         if (allCacheKeys.length === 0) {
             return;
         }
-        const matchingKeys = _.filter(allCacheKeys, 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;
-        }, {});
+        const matchingKeys = _.filter(allCacheKeys, (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;
+            },
+            {},
+        );
 
         val = values;
     }
@@ -339,17 +355,16 @@ function addToEvictionBlockList(key, connectionID) {
  * @returns {Promise}
  */
 function addAllSafeEvictionKeysToRecentlyAccessedList() {
-    return getAllKeys()
-        .then((keys) => {
-            _.each(evictionAllowList, (safeEvictionKey) => {
-                _.each(keys, (key) => {
-                    if (!isKeyMatch(safeEvictionKey, key)) {
-                        return;
-                    }
-                    addLastAccessedKey(key);
-                });
+    return getAllKeys().then((keys) => {
+        _.each(evictionAllowList, (safeEvictionKey) => {
+            _.each(keys, (key) => {
+                if (!isKeyMatch(safeEvictionKey, key)) {
+                    return;
+                }
+                addLastAccessedKey(key);
             });
         });
+    });
 }
 
 /**
@@ -358,20 +373,22 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
  * @returns {Object}
  */
 function getCachedCollection(collectionKey) {
-    const collectionMemberKeys = _.filter(cache.getAllKeys(), (
-        storedKey => isCollectionMemberKey(collectionKey, storedKey)
-    ));
+    const collectionMemberKeys = _.filter(cache.getAllKeys(), (storedKey) => isCollectionMemberKey(collectionKey, storedKey));
+
+    return _.reduce(
+        collectionMemberKeys,
+        (prev, curr) => {
+            const cachedValue = cache.getValue(curr);
+            if (!cachedValue) {
+                return prev;
+            }
 
-    return _.reduce(collectionMemberKeys, (prev, curr) => {
-        const cachedValue = cache.getValue(curr);
-        if (!cachedValue) {
+            // eslint-disable-next-line no-param-reassign
+            prev[curr] = cachedValue;
             return prev;
-        }
-
-        // eslint-disable-next-line no-param-reassign
-        prev[curr] = cachedValue;
-        return prev;
-    }, {});
+        },
+        {},
+    );
 }
 
 /**
@@ -740,9 +757,7 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
     if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
         // All React components subscribing to a key flagged as a safe eviction key must implement the canEvict property.
         if (_.isUndefined(mapping.canEvict)) {
-            throw new Error(
-                `Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`,
-            );
+            throw new Error(`Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`);
         }
 
         addLastAccessedKey(mapping.key);
@@ -757,13 +772,19 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
  * @param {Object} mapping
  */
 function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
-    Promise.all(_.map(matchingKeys, key => get(key)))
-        .then(values => _.reduce(values, (finalObject, value, i) => {
-            // eslint-disable-next-line no-param-reassign
-            finalObject[matchingKeys[i]] = value;
-            return finalObject;
-        }, {}))
-        .then(val => sendDataToConnection(mapping, val, undefined, true));
+    Promise.all(_.map(matchingKeys, (key) => get(key)))
+        .then((values) =>
+            _.reduce(
+                values,
+                (finalObject, value, i) => {
+                    // eslint-disable-next-line no-param-reassign
+                    finalObject[matchingKeys[i]] = value;
+                    return finalObject;
+                },
+                {},
+            ),
+        )
+        .then((val) => sendDataToConnection(mapping, val, undefined, true));
 }
 
 /**
@@ -810,11 +831,7 @@ function connect(mapping) {
             // Performance improvement
             // If the mapping is connected to an onyx key that is not a collection
             // we can skip the call to getAllKeys() and return an array with a single item
-            if (Boolean(mapping.key)
-                && typeof mapping.key === 'string'
-                && !(mapping.key.endsWith('_'))
-                && cache.storageKeys.has(mapping.key)
-            ) {
+            if (Boolean(mapping.key) && typeof mapping.key === 'string' && !mapping.key.endsWith('_') && cache.storageKeys.has(mapping.key)) {
                 return [mapping.key];
             }
             return getAllKeys();
@@ -823,7 +840,7 @@ function connect(mapping) {
             // We search all the keys in storage to see if any are a "match" for the subscriber we are connecting so that we
             // can send data back to the subscriber. Note that multiple keys can match as a subscriber could either be
             // subscribed to a "collection key" or a single key.
-            const matchingKeys = _.filter(keys, key => isKeyMatch(mapping.key, key));
+            const matchingKeys = _.filter(keys, (key) => isKeyMatch(mapping.key, key));
 
             // If the key being connected to does not exist we initialize the value with null. For subscribers that connected
             // directly via connect() they will simply get a null value sent to them without any information about which key matched
@@ -852,13 +869,13 @@ function connect(mapping) {
 
                     // We did not opt into using waitForCollectionCallback mode so the callback is called for every matching key.
                     for (let i = 0; i < matchingKeys.length; i++) {
-                        get(matchingKeys[i]).then(val => sendDataToConnection(mapping, val, matchingKeys[i], true));
+                        get(matchingKeys[i]).then((val) => sendDataToConnection(mapping, val, matchingKeys[i], true));
                     }
                     return;
                 }
 
                 // If we are not subscribed to a collection key then there's only a single key to send an update for.
-                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key, true));
+                get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key, true));
                 return;
             }
 
@@ -871,7 +888,7 @@ function connect(mapping) {
                 }
 
                 // If the subscriber is not using a collection key then we just send a single value back to the subscriber
-                get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key, true));
+                get(mapping.key).then((val) => sendDataToConnection(mapping, val, mapping.key, true));
                 return;
             }
 
@@ -978,13 +995,13 @@ function reportStorageQuota() {
 function evictStorageAndRetry(error, onyxMethod, ...args) {
     Logger.logInfo(`Failed to save to storage. Error: ${error}. onyxMethod: ${onyxMethod.name}`);
 
-    if (error && Str.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
+    if (error && Str.startsWith(error.message, "Failed to execute 'put' on 'IDBObjectStore'")) {
         Logger.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
         throw error;
     }
 
     // Find the first key that we can remove that has no subscribers in our blocklist
-    const keyForRemoval = _.find(recentlyAccessedKeys, key => !evictionBlocklist[key]);
+    const keyForRemoval = _.find(recentlyAccessedKeys, (key) => !evictionBlocklist[key]);
     if (!keyForRemoval) {
         // If we have no acceptable keys to remove then we are possibly trying to save mission critical data. If this is the case,
         // then we should stop retrying as there is not much the user can do to fix this. Instead of getting them stuck in an infinite loop we
@@ -996,8 +1013,7 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
     // Remove the least recently viewed key that is not currently being accessed and retry.
     Logger.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
     reportStorageQuota();
-    return remove(keyForRemoval)
-        .then(() => onyxMethod(...args));
+    return remove(keyForRemoval).then(() => onyxMethod(...args));
 }
 
 /**
@@ -1021,7 +1037,7 @@ function broadcastUpdate(key, value, hasChanged, method) {
         cache.addToAccessedKeys(key);
     }
 
-    return scheduleSubscriberUpdate(key, value, subscriber => hasChanged || subscriber.initWithStoredValues === false);
+    return scheduleSubscriberUpdate(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
 }
 
 /**
@@ -1060,6 +1076,15 @@ function removeNullValues(key, value) {
  * @returns {Promise}
  */
 function set(key, value) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.SET, key, value});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
     const valueWithoutNull = removeNullValues(key, value);
 
     if (valueWithoutNull === null) {
@@ -1081,7 +1106,7 @@ function set(key, value) {
     }
 
     return Storage.setItem(key, valueWithoutNull)
-        .catch(error => evictStorageAndRetry(error, set, key, valueWithoutNull))
+        .catch((error) => evictStorageAndRetry(error, set, key, valueWithoutNull))
         .then(() => updatePromise);
 }
 
@@ -1106,6 +1131,15 @@ function prepareKeyValuePairsForStorage(data) {
  * @returns {Promise}
  */
 function multiSet(data) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.MULTI_SET, data});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
     const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
     const updatePromises = _.map(data, (val, key) => {
@@ -1114,17 +1148,20 @@ function multiSet(data) {
         return scheduleSubscriberUpdate(key, val);
     });
 
-    const keyValuePairsWithoutNull = _.filter(_.map(keyValuePairs, ([key, value]) => {
-        const valueWithoutNull = removeNullValues(key, value);
+    const keyValuePairsWithoutNull = _.filter(
+        _.map(keyValuePairs, ([key, value]) => {
+            const valueWithoutNull = removeNullValues(key, value);
 
-        if (valueWithoutNull === null) {
-            return;
-        }
-        return [key, valueWithoutNull];
-    }), Boolean);
+            if (valueWithoutNull === null) {
+                return;
+            }
+            return [key, valueWithoutNull];
+        }),
+        Boolean,
+    );
 
     return Storage.multiSet(keyValuePairsWithoutNull)
-        .catch(error => evictStorageAndRetry(error, multiSet, data))
+        .catch((error) => evictStorageAndRetry(error, multiSet, data))
         .then(() => Promise.all(updatePromises));
 }
 
@@ -1146,8 +1183,7 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
 
     if (_.some(changes, _.isObject)) {
         // Object values are then merged one after the other
-        return _.reduce(changes, (modifiedData, change) => utils.fastMerge(modifiedData, change, shouldRemoveNullObjectValues),
-            existingValue || {});
+        return _.reduce(changes, (modifiedData, change) => utils.fastMerge(modifiedData, change, shouldRemoveNullObjectValues), existingValue || {});
     }
 
     // If we have anything else we can't merge it so we'll
@@ -1176,6 +1212,15 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
  * @returns {Promise}
  */
 function merge(key, changes) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.MERGE, key, changes});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
     // Top-level undefined values are ignored
     // Therefore we need to prevent adding them to the merge queue
     if (_.isUndefined(changes)) {
@@ -1190,57 +1235,55 @@ function merge(key, changes) {
     }
     mergeQueue[key] = [changes];
 
-    mergeQueuePromise[key] = get(key)
-        .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)
-                // We don't want to remove null values from the "batchedChanges", because SQLite uses them to remove keys from storage natively.
-                let batchedChanges = applyMerge(undefined, mergeQueue[key], false);
-
-                // The presence of a `null` in the merge queue instructs us to drop the existing value.
-                // In this case, we can't simply merge the batched changes with the existing value, because then the null in the merge queue would have no effect
-                const shouldOverwriteExistingValue = _.includes(mergeQueue[key], null);
+    mergeQueuePromise[key] = get(key).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)
+            // We don't want to remove null values from the "batchedChanges", because SQLite uses them to remove keys from storage natively.
+            let batchedChanges = applyMerge(undefined, mergeQueue[key], false);
 
-                // Clean up the write queue, so we don't apply these changes again
-                delete mergeQueue[key];
-                delete mergeQueuePromise[key];
+            // The presence of a `null` in the merge queue instructs us to drop the existing value.
+            // In this case, we can't simply merge the batched changes with the existing value, because then the null in the merge queue would have no effect
+            const shouldOverwriteExistingValue = _.includes(mergeQueue[key], null);
 
-                // If the batched changes equal null, we want to remove the key from storage, to reduce storage size
-                if (_.isNull(batchedChanges)) {
-                    remove(key);
-                    return;
-                }
+            // Clean up the write queue, so we don't apply these changes again
+            delete mergeQueue[key];
+            delete mergeQueuePromise[key];
 
-                // After that we merge the batched changes with the existing value
-                // We can remove null values from the "modifiedData", because "null" implicates that the user wants to remove a value from storage.
-                // The "modifiedData" will be directly "set" in storage instead of being merged
-                const modifiedData = shouldOverwriteExistingValue ? batchedChanges : applyMerge(existingValue, [batchedChanges], true);
-
-                // On native platforms we use SQLite which utilises JSON_PATCH to merge changes.
-                // JSON_PATCH generally removes null 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 null values won't be removed.
-                // Therefore we need to remove null values from the `batchedChanges` which are sent to the SQLite, if no existing value is present.
-                if (!existingValue) {
-                    batchedChanges = applyMerge(undefined, [batchedChanges], true);
-                }
+            // If the batched changes equal null, we want to remove the key from storage, to reduce storage size
+            if (_.isNull(batchedChanges)) {
+                remove(key);
+                return;
+            }
 
-                const hasChanged = cache.hasValueChanged(key, modifiedData);
+            // After that we merge the batched changes with the existing value
+            // We can remove null values from the "modifiedData", because "null" implicates that the user wants to remove a value from storage.
+            // The "modifiedData" will be directly "set" in storage instead of being merged
+            const modifiedData = shouldOverwriteExistingValue ? batchedChanges : applyMerge(existingValue, [batchedChanges], true);
+
+            // On native platforms we use SQLite which utilises JSON_PATCH to merge changes.
+            // JSON_PATCH generally removes null 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 null values won't be removed.
+            // Therefore we need to remove null values from the `batchedChanges` which are sent to the SQLite, if no existing value is present.
+            if (!existingValue) {
+                batchedChanges = applyMerge(undefined, [batchedChanges], true);
+            }
 
-                // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-                const updatePromise = broadcastUpdate(key, modifiedData, hasChanged, 'merge');
+            const hasChanged = cache.hasValueChanged(key, modifiedData);
 
-                // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
-                if (!hasChanged) {
-                    return updatePromise;
-                }
+            // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
+            const updatePromise = broadcastUpdate(key, modifiedData, hasChanged, 'merge');
 
-                return Storage.mergeItem(key, batchedChanges, modifiedData)
-                    .then(() => updatePromise);
-            } catch (error) {
-                Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
-                return Promise.resolve();
+            // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+            if (!hasChanged || isClearing) {
+                return updatePromise;
             }
-        });
+
+            return Storage.mergeItem(key, batchedChanges, modifiedData).then(() => updatePromise);
+        } catch (error) {
+            Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
+            return Promise.resolve();
+        }
+    });
 
     return mergeQueuePromise[key];
 }
@@ -1251,14 +1294,13 @@ function merge(key, changes) {
  * @returns {Promise}
  */
 function initializeWithDefaultKeyStates() {
-    return Storage.multiGet(_.keys(defaultKeyStates))
-        .then((pairs) => {
-            const asObject = _.object(pairs);
+    return Storage.multiGet(_.keys(defaultKeyStates)).then((pairs) => {
+        const asObject = _.object(pairs);
 
-            const merged = utils.fastMerge(asObject, defaultKeyStates);
-            cache.merge(merged);
-            _.each(merged, (val, key) => keyChanged(key, val));
-        });
+        const merged = utils.fastMerge(asObject, defaultKeyStates);
+        cache.merge(merged);
+        _.each(merged, (val, key) => keyChanged(key, val));
+    });
 }
 
 /**
@@ -1284,66 +1326,82 @@ function initializeWithDefaultKeyStates() {
  * @returns {Promise<void>}
  */
 function clear(keysToPreserve = []) {
-    return getAllKeys()
-        .then((keys) => {
-            const keysToBeClearedFromStorage = [];
-            const keyValuesToResetAsCollection = {};
-            const keyValuesToResetIndividually = {};
-
-            // The only keys that should not be cleared are:
-            // 1. Anything specifically passed in keysToPreserve (because some keys like language preferences, offline
-            //      status, or activeClients need to remain in Onyx even when signed out)
-            // 2. Any keys with a default state (because they need to remain in Onyx as their default, and setting them
-            //      to null would cause unknown behavior)
-            _.each(keys, (key) => {
-                const isKeyToPreserve = _.contains(keysToPreserve, key);
-                const isDefaultKey = _.has(defaultKeyStates, key);
-
-                // If the key is being removed or reset to default:
-                // 1. Update it in the cache
-                // 2. Figure out whether it is a collection key or not,
-                //      since collection key subscribers need to be updated differently
-                if (!isKeyToPreserve) {
-                    const oldValue = cache.getValue(key);
-                    const newValue = _.get(defaultKeyStates, key, null);
-                    if (newValue !== oldValue) {
-                        cache.set(key, newValue);
-                        const collectionKey = key.substring(0, key.indexOf('_') + 1);
-                        if (collectionKey) {
-                            if (!keyValuesToResetAsCollection[collectionKey]) {
-                                keyValuesToResetAsCollection[collectionKey] = {};
-                            }
-                            keyValuesToResetAsCollection[collectionKey][key] = newValue;
-                        } else {
-                            keyValuesToResetIndividually[key] = newValue;
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
+    isClearing = true;
+
+    return getAllKeys().then((keys) => {
+        const keysToBeClearedFromStorage = [];
+        const keyValuesToResetAsCollection = {};
+        const keyValuesToResetIndividually = {};
+
+        // The only keys that should not be cleared are:
+        // 1. Anything specifically passed in keysToPreserve (because some keys like language preferences, offline
+        //      status, or activeClients need to remain in Onyx even when signed out)
+        // 2. Any keys with a default state (because they need to remain in Onyx as their default, and setting them
+        //      to null would cause unknown behavior)
+        _.each(keys, (key) => {
+            const isKeyToPreserve = _.contains(keysToPreserve, key);
+            const isDefaultKey = _.has(defaultKeyStates, key);
+
+            // If the key is being removed or reset to default:
+            // 1. Update it in the cache
+            // 2. Figure out whether it is a collection key or not,
+            //      since collection key subscribers need to be updated differently
+            if (!isKeyToPreserve) {
+                const oldValue = cache.getValue(key);
+                const newValue = _.get(defaultKeyStates, key, null);
+                if (newValue !== oldValue) {
+                    cache.set(key, newValue);
+                    const collectionKey = key.substring(0, key.indexOf('_') + 1);
+                    if (collectionKey) {
+                        if (!keyValuesToResetAsCollection[collectionKey]) {
+                            keyValuesToResetAsCollection[collectionKey] = {};
                         }
+                        keyValuesToResetAsCollection[collectionKey][key] = newValue;
+                    } else {
+                        keyValuesToResetIndividually[key] = newValue;
                     }
                 }
+            }
 
-                if (isKeyToPreserve || isDefaultKey) {
-                    return;
-                }
+            if (isKeyToPreserve || isDefaultKey) {
+                return;
+            }
 
-                // If it isn't preserved and doesn't have a default, we'll remove it
-                keysToBeClearedFromStorage.push(key);
-            });
+            // If it isn't preserved and doesn't have a default, we'll remove it
+            keysToBeClearedFromStorage.push(key);
+        });
 
-            const updatePromises = [];
+        const updatePromises = [];
 
-            // Notify the subscribers for each key/value group so they can receive the new values
-            _.each(keyValuesToResetIndividually, (value, key) => {
-                updatePromises.push(scheduleSubscriberUpdate(key, value));
-            });
-            _.each(keyValuesToResetAsCollection, (value, key) => {
-                updatePromises.push(scheduleNotifyCollectionSubscribers(key, value));
-            });
+        // Notify the subscribers for each key/value group so they can receive the new values
+        _.each(keyValuesToResetIndividually, (value, key) => {
+            updatePromises.push(scheduleSubscriberUpdate(key, value));
+        });
+        _.each(keyValuesToResetAsCollection, (value, key) => {
+            updatePromises.push(scheduleNotifyCollectionSubscribers(key, value));
+        });
 
-            const defaultKeyValuePairs = _.pairs(_.omit(defaultKeyStates, keysToPreserve));
+        const defaultKeyValuePairs = _.pairs(_.omit(defaultKeyStates, keysToPreserve));
 
-            // Remove only the items that we want cleared from storage, and reset others to default
-            _.each(keysToBeClearedFromStorage, key => cache.drop(key));
-            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
-        });
+        // Remove only the items that we want cleared from storage, and reset others to default
+        _.each(keysToBeClearedFromStorage, (key) => cache.drop(key));
+        return Storage.removeItems(keysToBeClearedFromStorage)
+            .then(() => Storage.multiSet(defaultKeyValuePairs))
+            .then(() => {
+                isClearing = false;
+                Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+                return Promise.all(updatePromises);
+            });
+    });
 }
 
 /**
@@ -1386,49 +1444,48 @@ function mergeCollection(collectionKey, collection) {
         return Promise.resolve();
     }
 
-    return getAllKeys()
-        .then((persistedKeys) => {
-            // Split to keys that exist in storage and keys that don't
-            const [existingKeys, newKeys] = _.chain(collection)
-                .pick((value, key) => {
-                    if (_.isNull(value)) {
-                        remove(key);
-                        return false;
-                    }
-                    return true;
-                })
-                .keys()
-                .partition(key => persistedKeys.includes(key))
-                .value();
-
-            const existingKeyCollection = _.pick(collection, existingKeys);
-            const newCollection = _.pick(collection, newKeys);
-            const keyValuePairsForExistingCollection = prepareKeyValuePairsForStorage(existingKeyCollection);
-            const keyValuePairsForNewCollection = prepareKeyValuePairsForStorage(newCollection);
-
-            const promises = [];
-
-            // New keys will be added via multiSet while existing keys will be updated using multiMerge
-            // This is because setting a key that doesn't exist yet with multiMerge will throw errors
-            if (keyValuePairsForExistingCollection.length > 0) {
-                promises.push(Storage.multiMerge(keyValuePairsForExistingCollection));
-            }
-
-            if (keyValuePairsForNewCollection.length > 0) {
-                promises.push(Storage.multiSet(keyValuePairsForNewCollection));
-            }
+    return getAllKeys().then((persistedKeys) => {
+        // Split to keys that exist in storage and keys that don't
+        const [existingKeys, newKeys] = _.chain(collection)
+            .pick((value, key) => {
+                if (_.isNull(value)) {
+                    remove(key);
+                    return false;
+                }
+                return true;
+            })
+            .keys()
+            .partition((key) => persistedKeys.includes(key))
+            .value();
+
+        const existingKeyCollection = _.pick(collection, existingKeys);
+        const newCollection = _.pick(collection, newKeys);
+        const keyValuePairsForExistingCollection = prepareKeyValuePairsForStorage(existingKeyCollection);
+        const keyValuePairsForNewCollection = prepareKeyValuePairsForStorage(newCollection);
+
+        const promises = [];
+
+        // New keys will be added via multiSet while existing keys will be updated using multiMerge
+        // This is because setting a key that doesn't exist yet with multiMerge will throw errors
+        if (keyValuePairsForExistingCollection.length > 0) {
+            promises.push(Storage.multiMerge(keyValuePairsForExistingCollection));
+        }
 
-            // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
-            // and update all subscribers
-            const promiseUpdate = Promise.all(_.map(existingKeys, get)).then(() => {
-                cache.merge(collection);
-                return scheduleNotifyCollectionSubscribers(collectionKey, collection);
-            });
+        if (keyValuePairsForNewCollection.length > 0) {
+            promises.push(Storage.multiSet(keyValuePairsForNewCollection));
+        }
 
-            return Promise.all(promises)
-                .catch(error => evictStorageAndRetry(error, mergeCollection, collection))
-                .then(() => promiseUpdate);
+        // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
+        // and update all subscribers
+        const promiseUpdate = Promise.all(_.map(existingKeys, get)).then(() => {
+            cache.merge(collection);
+            return scheduleNotifyCollectionSubscribers(collectionKey, collection);
         });
+
+        return Promise.all(promises)
+            .catch((error) => evictStorageAndRetry(error, mergeCollection, collection))
+            .then(() => promiseUpdate);
+    });
 }
 
 /**
@@ -1478,7 +1535,7 @@ function update(data) {
         }
     });
 
-    return clearPromise.then(() => Promise.all(_.map(promises, p => p())));
+    return clearPromise.then(() => Promise.all(_.map(promises, (p) => p())));
 }
 
 /**
@@ -1492,6 +1549,48 @@ function setMemoryOnlyKeys(keyList) {
     cache.setRecentKeysLimit(Infinity);
 }
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ * @param {Function} callback
+ */
+function onClear(callback) {
+    onClearCallback = callback;
+}
+
+/**
+ * Subscribes to the Broadcast channel and executes actions based on the
+ * types of events.
+ */
+function subscribeToEvents() {
+    Broadcast.subscribe(({data}) => {
+        if (!ActiveClientManager.isClientTheLeader()) {
+            return;
+        }
+        switch (data.type) {
+            case METHOD.CLEAR:
+                clear(data.keysToPreserve);
+                break;
+            case METHOD.SET:
+                set(data.key, data.value);
+                break;
+            case METHOD.MULTI_SET:
+                multiSet(data.key, data.value);
+                break;
+            case METHOD.MERGE:
+                merge(data.key, data.changes);
+                break;
+            case ON_CLEAR:
+                if (!onClearCallback) {
+                    break;
+                }
+                onClearCallback();
+                break;
+            default:
+                break;
+        }
+    });
+}
+
 /**
  * Initialize the store with actions and listening for storage events
  *
@@ -1526,6 +1625,15 @@ function init({
     shouldSyncMultipleInstances = Boolean(global.localStorage),
     debugSetState = false,
 } = {}) {
+    ActiveClientManager.init();
+
+    ActiveClientManager.isReady().then(() => {
+        if (!ActiveClientManager.isClientTheLeader()) {
+            return;
+        }
+        subscribeToEvents();
+    });
+
     if (captureMetrics) {
         // The code here is only bundled and applied when the captureMetrics is set
         // eslint-disable-next-line no-use-before-define
@@ -1543,10 +1651,14 @@ function init({
     // We need the value of the collection keys later for checking if a
     // key is a collection. We store it in a map for faster lookup.
     const collectionValues = _.values(keys.COLLECTION);
-    onyxCollectionKeyMap = _.reduce(collectionValues, (acc, val) => {
-        acc.set(val, true);
-        return acc;
-    }, new Map());
+    onyxCollectionKeyMap = _.reduce(
+        collectionValues,
+        (acc, val) => {
+            acc.set(val, true);
+            return acc;
+        },
+        new Map(),
+    );
 
     // Set our default key states to use when initializing and clearing Onyx data
     defaultKeyStates = initialKeyStates;
@@ -1555,11 +1667,7 @@ function init({
     evictionAllowList = safeEvictionKeys;
 
     // Initialize all of our keys with data provided then give green light to any pending connections
-    Promise.all([
-        addAllSafeEvictionKeysToRecentlyAccessedList(),
-        initializeWithDefaultKeyStates(),
-    ])
-        .then(deferredInitTask.resolve);
+    Promise.all([addAllSafeEvictionKeysToRecentlyAccessedList(), initializeWithDefaultKeyStates()]).then(deferredInitTask.resolve);
 
     if (shouldSyncMultipleInstances && _.isFunction(Storage.keepInstancesSync)) {
         Storage.keepInstancesSync((key, value) => {
@@ -1588,6 +1696,10 @@ const Onyx = {
     setMemoryOnlyKeys,
     tryGetCachedValue,
     hasPendingMergeForKey,
+    onClear,
+    isClientManagerReady: ActiveClientManager.isReady,
+    isClientTheLeader: ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: ActiveClientManager.subscribeToClientChange,
 };
 
 /**