react-native-onyx 2.0.141 → 3.0.2

package/dist/types.d.ts

@@ -1,7 +1,6 @@
 import type { Merge } from 'type-fest';
 import type { BuiltIns } from 'type-fest/source/internal';
 import type OnyxUtils from './OnyxUtils';
-import type { WithOnyxInstance, WithOnyxState } from './withOnyx/types';
 import type { OnyxMethod } from './OnyxUtils';
 import type { FastMergeReplaceNullPatch } from './utils';
 /**
@@ -104,69 +103,21 @@ type OnyxKey = Key | CollectionKey;
 /**
  * Represents a selector function type which operates based on the provided `TKey` and `ReturnType`.
  *
- * A `Selector` is a function that accepts a value, the withOnyx's internal state and returns a processed value.
+ * A `Selector` is a function that accepts a value and returns a processed value.
  * This type accepts two type parameters: `TKey` and `TReturnType`.
  *
  * The type `TKey` extends `OnyxKey` and it is the key used to access a value in `KeyValueMapping`.
  * `TReturnType` is the type of the returned value from the selector function.
  */
-type Selector<TKey extends OnyxKey, TOnyxProps, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>, state?: WithOnyxState<TOnyxProps>) => TReturnType;
+type Selector<TKey extends OnyxKey, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>) => TReturnType;
 /**
  * Represents a single Onyx entry, that can be either `TOnyxValue` or `undefined` if it doesn't exist.
- *
- * It can be used to specify data retrieved from Onyx e.g. `withOnyx` HOC mappings.
- *
- * @example
- * ```ts
- * import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
- *
- * type OnyxProps = {
- *     userAccount: OnyxEntry<Account>;
- * };
- *
- * type Props = OnyxProps & {
- *     prop1: string;
- * };
- *
- * function Component({prop1, userAccount}: Props) {
- *     // ...
- * }
- *
- * export default withOnyx<Props, OnyxProps>({
- *     userAccount: {
- *         key: ONYXKEYS.ACCOUNT,
- *     },
- * })(Component);
- * ```
+ * It can be used to specify data retrieved from Onyx.
  */
 type OnyxEntry<TOnyxValue> = TOnyxValue | undefined;
 /**
  * Represents an Onyx collection of entries, that can be either a record of `TOnyxValue`s or `undefined` if it is empty or doesn't exist.
- *
- * It can be used to specify collection data retrieved from Onyx e.g. `withOnyx` HOC mappings.
- *
- * @example
- * ```ts
- * import Onyx, {OnyxCollection, withOnyx} from 'react-native-onyx';
- *
- * type OnyxProps = {
- *     reports: OnyxCollection<Report>;
- * };
- *
- * type Props = OnyxProps & {
- *     prop1: string;
- * };
- *
- * function Component({prop1, reports}: Props) {
- *     // ...
- * }
- *
- * export default withOnyx<Props, OnyxProps>({
- *     reports: {
- *         key: ONYXKEYS.COLLECTION.REPORT,
- *     },
- * })(Component);
- * ```
+ * It can be used to specify collection data retrieved from Onyx.
  */
 type OnyxCollection<TOnyxValue> = OnyxEntry<Record<string, TOnyxValue | undefined>>;
 /**
@@ -270,25 +221,7 @@ type CollectionConnectOptions<TKey extends OnyxKey> = BaseConnectOptions & {
  * and will pass `value` as an `OnyxEntry`.
  */
 type ConnectOptions<TKey extends OnyxKey> = DefaultConnectOptions<TKey> | CollectionConnectOptions<TKey>;
-/** Represents additional `Onyx.connect()` options used inside `withOnyx()` HOC. */
-type WithOnyxConnectOptions<TKey extends OnyxKey> = ConnectOptions<TKey> & {
-    /** The `withOnyx` class instance to be internally passed. */
-    withOnyxInstance: WithOnyxInstance;
-    /** The name of the component's prop that is connected to the Onyx key. */
-    statePropertyName: string;
-    /** The component's display name. */
-    displayName: string;
-    /**
-     * This will be used to subscribe to a subset of an Onyx key's 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).
-     */
-    selector?: Selector<TKey, unknown, unknown>;
-    /** Determines if this key in this subscription is safe to be evicted. */
-    canEvict?: boolean;
-};
-type Mapping<TKey extends OnyxKey> = WithOnyxConnectOptions<TKey> & {
+type CallbackToStateMapping<TKey extends OnyxKey> = ConnectOptions<TKey> & {
     subscriptionID: number;
 };
 /**
@@ -399,8 +332,6 @@ type InitOptions = {
      * of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop)
      */
     shouldSyncMultipleInstances?: boolean;
-    /** Enables debugging setState() calls to connected components */
-    debugSetState?: boolean;
     /**
      * If enabled it will use the performance API to measure the time taken by Onyx operations.
      * @default false
@@ -428,4 +359,4 @@ type MixedOperationsQueue = {
     mergeReplaceNullPatches: MultiMergeReplaceNullPatches;
     set: OnyxInputKeyValueMapping;
 };
-export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, GenericFunction, InitOptions, Key, KeyValueMapping, Mapping, NonNull, NonUndefined, OnyxInputKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxInputValue, OnyxCollectionInputValue, OnyxInput, OnyxSetInput, OnyxMultiSetInput, OnyxMergeInput, OnyxMergeCollectionInput, OnyxMethod, OnyxMethodMap, OnyxUpdate, OnyxValue, Selector, SetOptions, WithOnyxConnectOptions, MultiMergeReplaceNullPatches, MixedOperationsQueue, };
+export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, GenericFunction, InitOptions, Key, KeyValueMapping, CallbackToStateMapping, NonNull, NonUndefined, OnyxInputKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxInputValue, OnyxCollectionInputValue, OnyxInput, OnyxSetInput, OnyxMultiSetInput, OnyxMergeInput, OnyxMergeCollectionInput, OnyxMethod, OnyxMethodMap, OnyxUpdate, OnyxValue, Selector, SetOptions, MultiMergeReplaceNullPatches, MixedOperationsQueue, };

package/dist/useOnyx.js

@@ -152,7 +152,6 @@ function useOnyx(key, options, dependencies = []) {
         onStoreChangeFnRef.current();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [...dependencies]);
-    // Mimics withOnyx's checkEvictableKeys() behavior.
     const checkEvictableKey = (0, react_1.useCallback)(() => {
         if ((options === null || options === void 0 ? void 0 : options.canEvict) === undefined || !connectionRef.current) {
             return;

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ConnectOptions, OnyxInput, OnyxKey } from './types';
+import type { OnyxInput, OnyxKey } from './types';
 type EmptyObject = Record<string, never>;
 type EmptyValue = EmptyObject | null | undefined;
 /**
@@ -63,10 +63,6 @@ declare function pick<TValue>(obj: Record<string, TValue>, condition: string | s
  * @returns The object containing only the remaining entries after omission.
  */
 declare function omit<TValue>(obj: Record<string, TValue>, condition: string | string[] | ((entry: [string, TValue]) => boolean)): Record<string, TValue>;
-/**
- * Whether the connect options has the `withOnyxInstance` property defined, that is, it's used by the `withOnyx()` HOC.
- */
-declare function hasWithOnyxInstance<TKey extends OnyxKey>(mapping: ConnectOptions<TKey>): unknown;
 declare const _default: {
     fastMerge: typeof fastMerge;
     isEmptyObject: typeof isEmptyObject;
@@ -75,7 +71,6 @@ declare const _default: {
     checkCompatibilityWithExistingValue: typeof checkCompatibilityWithExistingValue;
     pick: typeof pick;
     omit: typeof omit;
-    hasWithOnyxInstance: typeof hasWithOnyxInstance;
     ONYX_INTERNALS__REPLACE_OBJECT_MARK: string;
 };
 export default _default;

package/dist/utils.js

@@ -204,12 +204,6 @@ function pick(obj, condition) {
 function omit(obj, condition) {
     return filterObject(obj, condition, false);
 }
-/**
- * Whether the connect options has the `withOnyxInstance` property defined, that is, it's used by the `withOnyx()` HOC.
- */
-function hasWithOnyxInstance(mapping) {
-    return 'withOnyxInstance' in mapping && mapping.withOnyxInstance;
-}
 exports.default = {
     fastMerge,
     isEmptyObject,
@@ -218,6 +212,5 @@ exports.default = {
     checkCompatibilityWithExistingValue,
     pick,
     omit,
-    hasWithOnyxInstance,
     ONYX_INTERNALS__REPLACE_OBJECT_MARK,
 };

package/package.json

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

package/dist/PerformanceUtils.d.ts

@@ -1,8 +0,0 @@
-import type { OnyxKey } from './types';
-import type { Mapping } from './Onyx';
-declare function setShouldDebugSetState(debug: boolean): void;
-/**
- * Provide insights into why a setState() call occurred by diffing the before and after values.
- */
-declare function logSetStateCall<TKey extends OnyxKey>(mapping: Mapping<TKey>, previousValue: unknown, newValue: unknown, caller: string, keyThatChanged?: string): void;
-export { logSetStateCall, setShouldDebugSetState };

package/dist/PerformanceUtils.js

@@ -1,52 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.logSetStateCall = logSetStateCall;
-exports.setShouldDebugSetState = setShouldDebugSetState;
-const transform_1 = __importDefault(require("lodash/transform"));
-const fast_equals_1 = require("fast-equals");
-let debugSetState = false;
-function setShouldDebugSetState(debug) {
-    debugSetState = debug;
-}
-/**
- * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
- * that state and props updates can be optimized.
- */
-function diffObject(object, base) {
-    return (0, transform_1.default)(object, (result, value, key) => {
-        if ((0, fast_equals_1.deepEqual)(value, base[key])) {
-            return;
-        }
-        if (typeof value === 'object' && typeof base[key] === 'object') {
-            // eslint-disable-next-line no-param-reassign
-            result[key] = diffObject(value, base[key]);
-        }
-        else {
-            // eslint-disable-next-line no-param-reassign
-            result[key] = value;
-        }
-    });
-}
-/**
- * Provide insights into why a setState() call occurred by diffing the before and after values.
- */
-function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChanged) {
-    if (!debugSetState) {
-        return;
-    }
-    const logParams = {};
-    if (keyThatChanged) {
-        logParams.keyThatChanged = keyThatChanged;
-    }
-    if (newValue && previousValue && typeof newValue === 'object' && typeof previousValue === 'object') {
-        logParams.difference = diffObject(previousValue, newValue);
-    }
-    else {
-        logParams.previousValue = previousValue;
-        logParams.newValue = newValue;
-    }
-    console.debug(`[Onyx-Debug] ${'displayName' in mapping && mapping.displayName} setState() called. Subscribed to key '${mapping.key}' (${caller})`, logParams);
-}

package/dist/withOnyx/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * This is a higher order component that provides the ability to map a state property directly to
- * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
- * will automatically change to reflect the new data.
- */
-import React from 'react';
-import type { MapOnyxToState } from './types';
-/**
- * @deprecated Use `useOnyx` instead of `withOnyx` whenever possible.
- *
- * This is a higher order component that provides the ability to map a state property directly to
- * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
- * will automatically change to reflect the new data.
- */
-export default function <TComponentProps, TOnyxProps>(mapOnyxToState: MapOnyxToState<TComponentProps, TOnyxProps>, shouldDelayUpdates?: boolean): (component: React.ComponentType<TComponentProps>) => React.ComponentType<Omit<TComponentProps, keyof TOnyxProps>>;

package/dist/withOnyx/index.js

@@ -1,322 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-/**
- * This is a higher order component that provides the ability to map a state property directly to
- * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
- * will automatically change to reflect the new data.
- */
-const react_1 = __importDefault(require("react"));
-const OnyxUtils_1 = __importDefault(require("../OnyxUtils"));
-const Str = __importStar(require("../Str"));
-const utils_1 = __importDefault(require("../utils"));
-const OnyxCache_1 = __importDefault(require("../OnyxCache"));
-const OnyxConnectionManager_1 = __importDefault(require("../OnyxConnectionManager"));
-// This is a list of keys that can exist on a `mapping`, but are not directly related to loading data from Onyx. When the keys of a mapping are looped over to check
-// if a key has changed, it's a good idea to skip looking at these properties since they would have unexpected results.
-const mappingPropertiesToIgnoreChangesTo = ['allowStaleData'];
-/**
- * Returns the display name of a component
- */
-function getDisplayName(component) {
-    return component.displayName || component.name || 'Component';
-}
-/**
- * Removes all the keys from state that are unrelated to the onyx data being mapped to the component.
- *
- * @param state of the component
- * @param onyxToStateMapping the object holding all of the mapping configuration for the component
- */
-function getOnyxDataFromState(state, onyxToStateMapping) {
-    return utils_1.default.pick(state, Object.keys(onyxToStateMapping));
-}
-/**
- * Utility function to return the properly typed entries of the `withOnyx` mapping object.
- */
-function mapOnyxToStateEntries(mapOnyxToState) {
-    return Object.entries(mapOnyxToState);
-}
-/**
- * @deprecated Use `useOnyx` instead of `withOnyx` whenever possible.
- *
- * This is a higher order component that provides the ability to map a state property directly to
- * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
- * will automatically change to reflect the new data.
- */
-function default_1(mapOnyxToState, shouldDelayUpdates = false) {
-    // A list of keys that must be present in tempState before we can render the WrappedComponent
-    const requiredKeysForInit = Object.keys(utils_1.default.omit(mapOnyxToState, ([, options]) => options.initWithStoredValues === false));
-    return (WrappedComponent) => {
-        const displayName = getDisplayName(WrappedComponent);
-        class withOnyx extends react_1.default.Component {
-            constructor(props) {
-                super(props);
-                this.pendingSetStates = [];
-                this.shouldDelayUpdates = shouldDelayUpdates;
-                this.setWithOnyxState = this.setWithOnyxState.bind(this);
-                this.flushPendingSetStates = this.flushPendingSetStates.bind(this);
-                // This stores all the Onyx connections to be used when the component unmounts so everything can be
-                // disconnected. It is a key value store with the format {[mapping.key]: connection metadata object}.
-                this.activeConnections = {};
-                const cachedState = mapOnyxToStateEntries(mapOnyxToState).reduce((resultObj, [propName, mapping]) => {
-                    const key = Str.result(mapping.key, props);
-                    const value = OnyxUtils_1.default.tryGetCachedValue(key, mapping);
-                    const hasCacheForKey = OnyxCache_1.default.hasCacheForKey(key);
-                    /**
-                     * 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.
-                     */
-                    const hasPendingMergeForKey = OnyxUtils_1.default.hasPendingMergeForKey(key);
-                    const hasValueInCache = hasCacheForKey || value !== undefined;
-                    const shouldSetState = mapping.initWithStoredValues !== false && ((hasValueInCache && !hasPendingMergeForKey) || !!mapping.allowStaleData);
-                    if (shouldSetState) {
-                        // eslint-disable-next-line no-param-reassign
-                        resultObj[propName] = value;
-                    }
-                    return resultObj;
-                }, {});
-                // If we have all the data we need, then we can render the component immediately
-                cachedState.loading = Object.keys(cachedState).length < requiredKeysForInit.length;
-                // Object holding the temporary initial state for the component while we load the various Onyx keys
-                this.tempState = cachedState;
-                this.state = cachedState;
-            }
-            componentDidMount() {
-                const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
-                // Subscribe each of the state properties to the proper Onyx key
-                mapOnyxToStateEntries(mapOnyxToState).forEach(([propName, mapping]) => {
-                    if (mappingPropertiesToIgnoreChangesTo.includes(propName)) {
-                        return;
-                    }
-                    const key = Str.result(mapping.key, Object.assign(Object.assign({}, this.props), onyxDataFromState));
-                    this.connectMappingToOnyx(mapping, propName, key);
-                });
-                this.checkEvictableKeys();
-            }
-            componentDidUpdate(prevProps, prevState) {
-                // The whole purpose of this method is to check to see if a key that is subscribed to Onyx has changed, and then Onyx needs to be disconnected from the old
-                // key and connected to the new key.
-                // For example, a key could change if KeyB depends on data loading from Onyx for KeyA.
-                const isFirstTimeUpdatingAfterLoading = prevState.loading && !this.state.loading;
-                const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
-                const prevOnyxDataFromState = getOnyxDataFromState(prevState, mapOnyxToState);
-                mapOnyxToStateEntries(mapOnyxToState).forEach(([propName, mapping]) => {
-                    // Some properties can be ignored because they aren't related to onyx keys and they will never change
-                    if (mappingPropertiesToIgnoreChangesTo.includes(propName)) {
-                        return;
-                    }
-                    // The previous key comes from either:
-                    // 1) The initial key that was connected to (ie. set from `componentDidMount()`)
-                    // 2) The updated props which caused `componentDidUpdate()` to run
-                    // The first case cannot be used all the time because of race conditions where `componentDidUpdate()` can be triggered before connectingMappingToOnyx() is done
-                    // (eg. if a user switches chats really quickly). In this case, it's much more stable to always look at the changes to prevProp and prevState to derive the key.
-                    // The second case cannot be used all the time because the onyx data doesn't change the first time that `componentDidUpdate()` runs after loading. In this case,
-                    // the `mapping.previousKey` must be used for the comparison or else this logic never detects that onyx data could have changed during the loading process.
-                    const previousKey = isFirstTimeUpdatingAfterLoading ? mapping.previousKey : Str.result(mapping.key, Object.assign(Object.assign({}, prevProps), prevOnyxDataFromState));
-                    const newKey = Str.result(mapping.key, Object.assign(Object.assign({}, this.props), onyxDataFromState));
-                    if (previousKey !== newKey) {
-                        OnyxConnectionManager_1.default.disconnect(this.activeConnections[previousKey]);
-                        delete this.activeConnections[previousKey];
-                        this.connectMappingToOnyx(mapping, propName, newKey);
-                    }
-                });
-                this.checkEvictableKeys();
-            }
-            componentWillUnmount() {
-                // Disconnect everything from Onyx
-                mapOnyxToStateEntries(mapOnyxToState).forEach(([, mapping]) => {
-                    const key = Str.result(mapping.key, Object.assign(Object.assign({}, this.props), getOnyxDataFromState(this.state, mapOnyxToState)));
-                    OnyxConnectionManager_1.default.disconnect(this.activeConnections[key]);
-                });
-            }
-            setStateProxy(modifier) {
-                if (this.shouldDelayUpdates) {
-                    this.pendingSetStates.push(modifier);
-                }
-                else {
-                    this.setState(modifier);
-                }
-            }
-            /**
-             * 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.
-             */
-            setWithOnyxState(statePropertyName, val) {
-                const prevVal = this.state[statePropertyName];
-                // If the component is not loading (read "mounting"), then we can just update the state
-                // There is a small race condition.
-                // When calling setWithOnyxState we delete the tempState object that is used to hold temporary state updates while the HOC is gathering data.
-                // However the loading flag is only set on the setState callback down below. setState however is an async operation that is also batched,
-                // therefore there is a small window of time where the loading flag is not false but the tempState is already gone
-                // (while the update is queued and waiting to be applied).
-                // This simply bypasses the loading check if the tempState is gone and the update can be safely queued with a normal setStateProxy.
-                if (!this.state.loading || !this.tempState) {
-                    // Performance optimization, do not trigger update with same values
-                    if (prevVal === val || (utils_1.default.isEmptyObject(prevVal) && utils_1.default.isEmptyObject(val))) {
-                        return;
-                    }
-                    const valueWithoutNull = val === null ? undefined : val;
-                    this.setStateProxy({ [statePropertyName]: valueWithoutNull });
-                    return;
-                }
-                this.tempState[statePropertyName] = val;
-                // If some key does not have a value yet, do not update the state yet
-                const tempStateIsMissingKey = requiredKeysForInit.some((key) => { var _a; return !(key in ((_a = this.tempState) !== null && _a !== void 0 ? _a : {})); });
-                if (tempStateIsMissingKey) {
-                    return;
-                }
-                const stateUpdate = Object.assign({}, this.tempState);
-                delete this.tempState;
-                // Full of hacky workarounds to prevent the race condition described above.
-                this.setState((prevState) => {
-                    const finalState = Object.keys(stateUpdate).reduce((result, _key) => {
-                        const key = _key;
-                        if (key === 'loading') {
-                            return result;
-                        }
-                        // if value is already there then we can discard the value we are trying to hydrate
-                        if (prevState[key] !== undefined && prevState[key] !== null) {
-                            // eslint-disable-next-line no-param-reassign
-                            result[key] = prevState[key];
-                        }
-                        else if (stateUpdate[key] !== null) {
-                            // eslint-disable-next-line no-param-reassign
-                            result[key] = stateUpdate[key];
-                        }
-                        return result;
-                    }, {});
-                    finalState.loading = false;
-                    return finalState;
-                });
-            }
-            /**
-             * Makes sure each Onyx key we requested has been set to state with a value of some kind.
-             * We are doing this so that the wrapped component will only render when all the data
-             * it needs is available to it.
-             */
-            checkEvictableKeys() {
-                // We will add this key to our list of recently accessed keys
-                // if the canEvict function returns true. This is necessary criteria
-                // we MUST use to specify if a key can be removed or not.
-                mapOnyxToStateEntries(mapOnyxToState).forEach(([, mapping]) => {
-                    if (mapping.canEvict === undefined) {
-                        return;
-                    }
-                    const canEvict = !!Str.result(mapping.canEvict, this.props);
-                    const key = Str.result(mapping.key, this.props);
-                    if (!OnyxCache_1.default.isEvictableKey(key)) {
-                        throw new Error(`canEvict can't be used on key '${key}'. This key must explicitly be flagged as safe for removal by adding it to Onyx.init({evictableKeys: []}).`);
-                    }
-                    if (canEvict) {
-                        OnyxConnectionManager_1.default.removeFromEvictionBlockList(this.activeConnections[key]);
-                    }
-                    else {
-                        OnyxConnectionManager_1.default.addToEvictionBlockList(this.activeConnections[key]);
-                    }
-                });
-            }
-            /**
-             * Takes a single mapping and binds the state of the component to the store
-             *
-             * @param mapping.key key to connect to. can be a string or a
-             * function that takes this.props as an argument and returns a string
-             * @param statePropertyName the name of the state property that Onyx will add the data to
-             * @param [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
-             *  component
-             * @param key to connect to Onyx with
-             */
-            connectMappingToOnyx(mapping, statePropertyName, key) {
-                const onyxMapping = mapOnyxToState[statePropertyName];
-                // Remember what the previous key was so that key changes can be detected when data is being loaded from Onyx. This will allow
-                // dependent keys to finish loading their data.
-                // eslint-disable-next-line no-param-reassign
-                onyxMapping.previousKey = key;
-                // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
-                this.activeConnections[key] = OnyxConnectionManager_1.default.connect(Object.assign(Object.assign({}, mapping), { key, statePropertyName: statePropertyName, withOnyxInstance: this, displayName }));
-            }
-            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 = utils_1.default.omit(this.props, ([, propValue]) => propValue === null);
-                if (this.state.loading) {
-                    return null;
-                }
-                // Remove any internal state properties used by withOnyx
-                // that should not be passed to a wrapped component
-                const stateToPass = utils_1.default.omit(this.state, ([stateKey, stateValue]) => stateKey === 'loading' || stateValue === null);
-                // Spreading props and state is necessary in an HOC where the data cannot be predicted
-                return (react_1.default.createElement(WrappedComponent, Object.assign({ markReadyForHydration: this.flushPendingSetStates }, propsToPass, stateToPass, { ref: this.props.forwardedRef })));
-            }
-        }
-        withOnyx.displayName = `withOnyx(${displayName})`;
-        return react_1.default.forwardRef((props, ref) => {
-            const Component = withOnyx;
-            return (react_1.default.createElement(Component
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            , Object.assign({}, props, { forwardedRef: ref })));
-        });
-    };
-}