[Fix #21022] Improve performance by reducing re-renders SidebarLinks

src/components/LHNOptionsList/OptionRowLHN.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {View, StyleSheet} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
@@ -27,6 +28,7 @@ import * as ContextMenuActions from '../../pages/home/report/ContextMenu/Context
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
+import withCurrentReportId from '../withCurrentReportId';
 import * as Report from '../../libs/actions/Report';
 
 const propTypes = {
@@ -51,6 +53,8 @@ const propTypes = {
 
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    optionItem: PropTypes.shape({}),
+
     ...withLocalizePropTypes,
 };
 
@@ -60,11 +64,12 @@ const defaultProps = {
     onSelectRow: () => {},
     isFocused: false,
     style: null,
+    optionItem: null,
     comment: '',
 };
 
-function OptionRowLHN(props) {
-    const optionItem = SidebarUtils.getOptionData(props.reportID);
+function BaseOptionRowLHN(props) {
+    const optionItem = props.optionItem;
 
     useEffect(() => {
         if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || props.isFocused) {
@@ -267,12 +272,44 @@ function OptionRowLHN(props) {
     );
 }
 
+BaseOptionRowLHN.propTypes = propTypes;
+BaseOptionRowLHN.defaultProps = defaultProps;
+BaseOptionRowLHN.displayName = 'BaseOptionRowLHN';
+
+const MemoedOptionRowLHN = React.memo(
+    compose(
+        withLocalize,
+        withOnyx({
+            optionItem: {
+                key: (props) => ONYXKEYS.COLLECTION.REPORT + props.reportID,
+                selector: SidebarUtils.getOptionData,
+            },
+        }),
+    )(BaseOptionRowLHN),
+);
+
+// We only want to pass a boolean to the memoized
+// component, thats why we have this intermediate component.
+// (We don't want to fully re-render all items, just because the active report changed).
+function OptionRowLHN(props) {
+    const isFocused = props.currentReportId === props.reportID;
+
+    return (
+        <MemoedOptionRowLHN
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {..._.omit(props, 'currentReportId')}
+            isFocused={isFocused}
+        />
+    );
+}
+
 OptionRowLHN.propTypes = propTypes;
 OptionRowLHN.defaultProps = defaultProps;
-OptionRowLHN.displayName = 'OptionRowLHN';
+OptionRowLHN.displayName = 'OptionRowIsFocusedSupport';
 
 export default compose(
     withLocalize,
+    withCurrentReportId,
     withReportCommentDrafts({
         propName: 'comment',
         transformValue: (drafts, props) => {

src/libs/ReportUtils.js

@@ -1891,14 +1891,13 @@ function canSeeDefaultRoom(report, policies, betas) {
  * filter out the majority of reports before filtering out very specific minority of reports.
  *
  * @param {Object} report
- * @param {String} currentReportId
  * @param {Boolean} isInGSDMode
  * @param {Object} iouReports
  * @param {String[]} betas
  * @param {Object} policies
  * @returns {boolean}
  */
-function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouReports, betas, policies) {
+function shouldReportBeInOptionList(report, isInGSDMode, iouReports, betas, policies) {
     const isInDefaultMode = !isInGSDMode;
 
     // Exclude reports that have no data because there wouldn't be anything to show in the option item.
@@ -1916,13 +1915,6 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouRep
         return false;
     }
 
-    // Include the currently viewed report. If we excluded the currently viewed report, then there
-    // would be no way to highlight it in the options list and it would be confusing to users because they lose
-    // a sense of context.
-    if (report.reportID === currentReportId) {
-        return true;
-    }
-
     // Include reports if they have a draft, are pinned, or have an outstanding IOU
     // These are always relevant to the user no matter what view mode the user prefers
     if (report.hasDraft || report.isPinned || hasOutstandingIOU(report, iouReports)) {
@@ -1945,7 +1937,7 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouRep
         return true;
     }
 
-    // Include policy expense chats if the user isn't in the policy expense chat beta
+    // Exclude policy expense chats if the user isn't in the policy expense chat beta
     if (isPolicyExpenseChat(report) && !Permissions.canUsePolicyExpenseChat(betas)) {
         return false;
     }

src/libs/SidebarUtils.js

@@ -117,15 +117,14 @@ function setIsSidebarLoadedReady() {
 }
 
 /**
- * @param {String} currentReportId
  * @returns {String[]} An array of reportIDs sorted in the proper order
  */
-function getOrderedReportIDs(currentReportId) {
+function getOrderedReportIDs() {
     const isInGSDMode = priorityMode === CONST.PRIORITY_MODE.GSD;
     const isInDefaultMode = !isInGSDMode;
 
     // Filter out all the reports that shouldn't be displayed
-    const reportsToDisplay = _.filter(allReports, (report) => ReportUtils.shouldReportBeInOptionList(report, currentReportId, isInGSDMode, allReports, betas, policies));
+    const reportsToDisplay = _.filter(allReports, (report) => ReportUtils.shouldReportBeInOptionList(report, isInGSDMode, allReports, betas, policies));
     if (_.isEmpty(reportsToDisplay)) {
         // Display Concierge chat report when there is no report to be displayed
         const conciergeChatReport = _.find(allReports, ReportUtils.isConciergeChatReport);
@@ -213,13 +212,10 @@ function getOrderedReportIDs(currentReportId) {
 /**
  * Gets all the data necessary for rendering an OptionRowLHN component
  *
- * @param {String} reportID
+ * @param {Object} report
  * @returns {Object}
  */
-function getOptionData(reportID) {
-    const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
-    const report = allReports[reportKey];
-
+function getOptionData(report) {
     // When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
     // this method to be called after the Onyx data has been cleared out. In that case, it's fine to do
     // a null check here and return early.

src/libs/onyxSubscribe.js

@@ -0,0 +1,12 @@
+import Onyx from 'react-native-onyx';
+
+/**
+ * Connect to onyx data. Same params as Onyx.connect(), but returns a function to unsubscribe.
+ *
+ * @param {Object} mapping Same as for Onyx.connect()
+ * @return {function(): void} Unsubscribe callback
+ */
+export default (mapping) => {
+    const connectionId = Onyx.connect(mapping);
+    return () => Onyx.disconnect(connectionId);
+};

src/pages/home/sidebar/SidebarLinks.js

@@ -28,7 +28,6 @@ import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import withNavigationFocus from '../../../components/withNavigationFocus';
-import withCurrentReportId, {withCurrentReportIdPropTypes} from '../../../components/withCurrentReportId';
 import withNavigation, {withNavigationPropTypes} from '../../../components/withNavigation';
 import Header from '../../../components/Header';
 import defaultTheme from '../../../styles/themes/default';
@@ -40,6 +39,7 @@ import * as Session from '../../../libs/actions/Session';
 import Button from '../../../components/Button';
 import * as UserUtils from '../../../libs/UserUtils';
 import KeyboardShortcut from '../../../libs/KeyboardShortcut';
+import onyxSubscribe from '../../../libs/onyxSubscribe';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -88,7 +88,6 @@ const propTypes = {
     }),
 
     ...withLocalizePropTypes,
-    ...withCurrentReportIdPropTypes,
     ...withNavigationPropTypes,
 };
 
@@ -121,11 +120,19 @@ class SidebarLinks extends React.Component {
         SidebarUtils.setIsSidebarLoadedReady();
         this.isSidebarLoaded = true;
 
+        let modal = {};
+        this.unsubscribeOnyxModal = onyxSubscribe({
+            key: ONYXKEYS.MODAL,
+            callback: (modalArg) => {
+                modal = modalArg;
+            },
+        });
+
         const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
         this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(
             shortcutConfig.shortcutKey,
             () => {
-                if (this.props.modal.willAlertModalBecomeVisible) {
+                if (modal.willAlertModalBecomeVisible) {
                     return;
                 }
 
@@ -143,6 +150,9 @@ class SidebarLinks extends React.Component {
         if (this.unsubscribeEscapeKey) {
             this.unsubscribeEscapeKey();
         }
+        if (this.unsubscribeOnyxModal) {
+            this.unsubscribeOnyxModal();
+        }
     }
 
     showSearchPage() {
@@ -180,7 +190,7 @@ class SidebarLinks extends React.Component {
 
     render() {
         const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
-        const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.currentReportId);
+        const optionListItems = SidebarUtils.getOrderedReportIDs();
 
         const skeletonPlaceholder = <OptionsListSkeletonView shouldAnimate />;
 
@@ -274,8 +284,6 @@ const chatReportSelector = (report) =>
         errorFields: {
             addWorkspaceRoom: report.errorFields && report.errorFields.addWorkspaceRoom,
         },
-        lastReadTime: report.lastReadTime,
-        lastMentionedTime: report.lastMentionedTime,
         lastMessageText: report.lastMessageText,
         lastVisibleActionCreated: report.lastVisibleActionCreated,
         iouReportID: report.iouReportID,
@@ -335,7 +343,6 @@ export default compose(
     withCurrentUserPersonalDetails,
     withNavigationFocus,
     withWindowDimensions,
-    withCurrentReportId,
     withNavigation,
     withOnyx({
         // Note: It is very important that the keys subscribed to here are the same
@@ -368,8 +375,5 @@ export default compose(
         preferredLocale: {
             key: ONYXKEYS.NVP_PREFERRED_LOCALE,
         },
-        modal: {
-            key: ONYXKEYS.MODAL,
-        },
     }),
 )(SidebarLinks);