perf: refactor heavy operations when user starts to type

src/ONYXKEYS.ts

@@ -11,6 +11,9 @@ const ONYXKEYS = {
     /** Holds information about the users account that is logging in */
     ACCOUNT: 'account',
 
+    /** Holds the reportIDs which are currently in draft */
+    DRAFT_REPORT_IDS: 'draftReportIDs',
+
     /** Holds the reportID for the report between the user and their account manager */
     ACCOUNT_MANAGER_REPORT_ID: 'accountManagerReportID',
 
@@ -309,6 +312,7 @@ type OnyxKey = DeepValueOf<Omit<OnyxKeysMap, 'COLLECTION'>>;
 
 type OnyxValues = {
     [ONYXKEYS.ACCOUNT]: OnyxTypes.Account;
+    [ONYXKEYS.DRAFT_REPORT_IDS]: Record<string, boolean>;
     [ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID]: string;
     [ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER]: boolean;
     [ONYXKEYS.ACTIVE_CLIENTS]: string[];

src/components/LHNOptionsList/OptionRowLHN.js

@@ -3,6 +3,7 @@ import React, {useState, useRef, useCallback} from 'react';
 import PropTypes from 'prop-types';
 import {View, StyleSheet} from 'react-native';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import {useFocusEffect} from '@react-navigation/native';
 import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
@@ -26,6 +27,7 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import useLocalize from '../../hooks/useLocalize';
 import Permissions from '../../libs/Permissions';
 import Tooltip from '../Tooltip';
+import ONYXKEYS from '../../ONYXKEYS';
 import DomUtils from '../../libs/DomUtils';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
 import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager';
@@ -55,6 +57,9 @@ const propTypes = {
     /** The item that should be rendered */
     // eslint-disable-next-line react/forbid-prop-types
     optionItem: PropTypes.object,
+
+    // eslint-disable-next-line react/forbid-prop-types
+    draftReportIDs: PropTypes.object,
 };
 
 const defaultProps = {
@@ -65,6 +70,7 @@ const defaultProps = {
     optionItem: null,
     isFocused: false,
     betas: [],
+    draftReportIDs: {},
 };
 
 function OptionRowLHN(props) {
@@ -153,6 +159,7 @@ function OptionRowLHN(props) {
     const formattedDate = DateUtils.getStatusUntilDate(statusClearAfterDate);
     const statusContent = formattedDate ? `${statusText} (${formattedDate})` : statusText;
     const isStatusVisible = Permissions.canUseCustomStatus(props.betas) && !!emojiCode && ReportUtils.isOneOnOneChat(optionItem);
+    const isDraft = props.draftReportIDs[props.reportID];
 
     return (
         <OfflineWithFeedback
@@ -288,7 +295,7 @@ function OptionRowLHN(props) {
                                     />
                                 </View>
                             )}
-                            {optionItem.hasDraftComment && optionItem.isAllowedToComment && (
+                            {isDraft && optionItem.isAllowedToComment && (
                                 <View
                                     style={styles.ml2}
                                     accessibilityLabel={translate('sidebarScreen.draftedMessage')}
@@ -316,6 +323,13 @@ OptionRowLHN.propTypes = propTypes;
 OptionRowLHN.defaultProps = defaultProps;
 OptionRowLHN.displayName = 'OptionRowLHN';
 
-export default React.memo(OptionRowLHN);
+export default React.memo(
+    withOnyx({
+        draftReportIDs: {
+            key: ONYXKEYS.DRAFT_REPORT_IDS,
+            initialValue: {},
+        },
+    })(OptionRowLHN),
+);
 
 export {propTypes, defaultProps};

src/components/LHNOptionsList/OptionRowLHNData.js

@@ -9,14 +9,15 @@ import SidebarUtils from '../../libs/SidebarUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import OptionRowLHN, {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './OptionRowLHN';
-import * as Report from '../../libs/actions/Report';
 import * as UserUtils from '../../libs/UserUtils';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 
 import participantPropTypes from '../participantPropTypes';
 import CONST from '../../CONST';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
+import setDraftStatusForReportID from '../../libs/actions/DraftReports';
+import DraftReportUtils from '../../libs/DraftReportUtils';
 
 const propTypes = {
     /** Whether row should be focused */
@@ -110,10 +111,13 @@ function OptionRowLHNData({
     }, [fullReport, linkedTransaction, reportActions, personalDetails, preferredLocale, policy, parentReportAction, transaction]);
 
     useEffect(() => {
-        if (!optionItem || optionItem.hasDraftComment || !comment || comment.length <= 0 || isFocused) {
+        const draftReportIDs = DraftReportUtils.getInstance().getDraftReportIDs();
+        const hasDraft = draftReportIDs[reportID];
+
+        if (!optionItem || hasDraft || !comment || comment.length <= 0 || isFocused) {
             return;
         }
-        Report.setReportWithDraft(reportID, true);
+        setDraftStatusForReportID(reportID, true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -174,14 +178,17 @@ export default React.memo(
         withOnyx({
             fullReport: {
                 key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                initialValue: {},
             },
             reportActions: {
                 key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
                 canEvict: false,
+                initialValue: {},
             },
             personalDetails: {
                 key: ONYXKEYS.PERSONAL_DETAILS_LIST,
                 selector: personalDetailsSelector,
+                initialValue: {},
             },
             preferredLocale: {
                 key: ONYXKEYS.NVP_PREFERRED_LOCALE,
@@ -192,15 +199,17 @@ export default React.memo(
             parentReportActions: {
                 key: ({fullReport}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${fullReport.parentReportID}`,
                 canEvict: false,
+                initialValue: {},
             },
             policy: {
                 key: ({fullReport}) => `${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`,
+                initialValue: {},
             },
             // Ideally, we aim to access only the last transaction for the current report by listening to changes in reportActions.
             // In some scenarios, a transaction might be created after reportActions have been modified.
             // This can lead to situations where `lastTransaction` doesn't update and retains the previous value.
             // However, performance overhead of this is minimized by using memos inside the component.
-            receiptTransactions: {key: ONYXKEYS.COLLECTION.TRANSACTION},
+            receiptTransactions: {key: ONYXKEYS.COLLECTION.TRANSACTION, initialValue: {}},
         }),
         // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
         withOnyx({

src/components/optionPropTypes.js

@@ -25,9 +25,6 @@ export default PropTypes.shape({
     // reportID (only present when there is a matching report)
     reportID: PropTypes.string,
 
-    // Whether the report has a draft comment or not
-    hasDraftComment: PropTypes.bool,
-
     // Key used internally by React
     keyForList: PropTypes.string,
 

src/libs/DraftReportUtils.ts

@@ -0,0 +1,54 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+
+/**
+ * A singleton class to manage the draft report IDs
+ * @class DraftReportUtils
+ * @singleton
+ */
+class DraftReportUtils {
+    private static instance: DraftReportUtils;
+
+    private draftReportIDs: Record<string, boolean>;
+
+    private constructor() {
+        DraftReportUtils.instance = this;
+
+        this.draftReportIDs = {};
+
+        this.subscribeToDraftReportIDs();
+    }
+
+    /**
+     * @returns The singleton instance
+     */
+    public static getInstance(): DraftReportUtils {
+        // Ensure singleton instance
+        return DraftReportUtils.instance ?? new DraftReportUtils();
+    }
+
+    /**
+     * Subscribe to the draft report IDs
+     */
+    private subscribeToDraftReportIDs() {
+        Onyx.connect({
+            key: ONYXKEYS.DRAFT_REPORT_IDS,
+            callback: (val) => {
+                if (!val) {
+                    return;
+                }
+
+                this.draftReportIDs = val;
+            },
+        });
+    }
+
+    /**
+     * @returns The draft report IDs
+     */
+    getDraftReportIDs() {
+        return this.draftReportIDs;
+    }
+}
+
+export default DraftReportUtils;

src/libs/OptionsListUtils.js

@@ -83,6 +83,7 @@ Onyx.connect({
 const policyExpenseReports = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
+    waitForCollectionCallback: true,
     callback: (report, key) => {
         if (!ReportUtils.isPolicyExpenseChat(report)) {
             return;
@@ -433,7 +434,6 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
         login: null,
         reportID: null,
         phoneNumber: null,
-        hasDraftComment: false,
         keyForList: null,
         searchText: null,
         isDefaultRoom: false,
@@ -480,7 +480,6 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
         result.ownerAccountID = report.ownerAccountID;
         result.reportID = report.reportID;
         result.isUnread = ReportUtils.isUnread(report);
-        result.hasDraftComment = report.hasDraft;
         result.isPinned = report.isPinned;
         result.iouReportID = report.iouReportID;
         result.keyForList = String(report.reportID);

src/libs/ReportActionsUtils.js

@@ -13,6 +13,7 @@ import isReportMessageAttachment from './isReportMessageAttachment';
 const allReports = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
+    waitForCollectionCallback: true,
     callback: (report, key) => {
         if (!key || !report) {
             return;
@@ -47,7 +48,7 @@ Onyx.connect({
  * @returns {Boolean}
  */
 function isCreatedAction(reportAction) {
-    return lodashGet(reportAction, 'actionName') === CONST.REPORT.ACTIONS.TYPE.CREATED;
+    return reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED;
 }
 
 /**
@@ -56,16 +57,27 @@ function isCreatedAction(reportAction) {
  */
 function isDeletedAction(reportAction) {
     // A deleted comment has either an empty array or an object with html field with empty string as value
-    const message = lodashGet(reportAction, 'message', []);
-    return message.length === 0 || lodashGet(message, [0, 'html']) === '';
+    let message = [];
+    if (reportAction.message) {
+        message = reportAction.message;
+    }
+
+    if (message.length === 0) {
+        return true;
+    }
+
+    return message[0].html === '';
 }
 
 /**
  * @param {Object} reportAction
  * @returns {Boolean}
  */
 function isDeletedParentAction(reportAction) {
-    return lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0;
+    const isDeleted = (reportAction && reportAction.message && reportAction.message[0] && reportAction.message[0].isDeletedParentAction) || false;
+    const childVisibleActionCount = (reportAction && reportAction.childVisibleActionCount) || 0;
+
+    return isDeleted && childVisibleActionCount > 0;
 }
 
 /**
@@ -81,7 +93,7 @@ function isReversedTransaction(reportAction) {
  * @returns {Boolean}
  */
 function isPendingRemove(reportAction) {
-    return lodashGet(reportAction, 'message[0].moderationDecision.decision') === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE;
+    return reportAction['message[0].moderationDecision.decision'] === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE;
 }
 
 /**
@@ -421,7 +433,10 @@ function getLastVisibleAction(reportID, actionsToMerge = {}) {
  */
 function getLastVisibleMessage(reportID, actionsToMerge = {}) {
     const lastVisibleAction = getLastVisibleAction(reportID, actionsToMerge);
-    const message = lodashGet(lastVisibleAction, ['message', 0], {});
+    let message = {};
+    if (lastVisibleAction.message) {
+        message = lastVisibleAction.message[0];
+    }
 
     if (isReportMessageAttachment(message)) {
         return {
@@ -437,9 +452,14 @@ function getLastVisibleMessage(reportID, actionsToMerge = {}) {
         };
     }
 
-    const messageText = lodashGet(message, 'text', '');
+    let messageText = message.text || '';
+
+    if (messageText) {
+        messageText = String(messageText).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim();
+    }
+
     return {
-        lastMessageText: String(messageText).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim(),
+        lastMessageText: messageText,
     };
 }
 
@@ -638,7 +658,7 @@ function isTaskAction(reportAction) {
  * @returns {[Object]}
  */
 function getAllReportActions(reportID) {
-    return lodashGet(allReportActions, reportID, []);
+    return allReportActions[reportID] || [];
 }
 
 /**