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

src/components/LHNOptionsList/LHNOptionsList.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
-import OptionRowLHN from './OptionRowLHN';
+import OptionRowLHNData from './OptionRowLHNData';
 import variables from '../../styles/variables';
 import CONST from '../../CONST';
 
@@ -15,9 +15,6 @@ const propTypes = {
     /** Sections for the section list */
     data: PropTypes.arrayOf(PropTypes.string).isRequired,
 
-    /** Index for option to focus on */
-    focusedIndex: PropTypes.number.isRequired,
-
     /** Callback to fire when a row is selected */
     onSelectRow: PropTypes.func.isRequired,
 
@@ -65,16 +62,15 @@ class LHNOptionsList extends Component {
      *
      * @param {Object} params
      * @param {Object} params.item
-     * @param {Number} params.index
      *
      * @return {Component}
      */
-    renderItem({item, index}) {
+    renderItem({item}) {
         return (
-            <OptionRowLHN
+            <OptionRowLHNData
                 reportID={item}
                 viewMode={this.props.optionMode}
-                isFocused={!this.props.shouldDisableFocusOptions && this.props.focusedIndex === index}
+                shouldDisableFocusOptions={this.props.shouldDisableFocusOptions}
                 onSelectRow={this.props.onSelectRow}
             />
         );
@@ -98,7 +94,6 @@ class LHNOptionsList extends Component {
                     stickySectionHeadersEnabled={false}
                     renderItem={this.renderItem}
                     getItemLayout={this.getItemLayout}
-                    extraData={this.props.focusedIndex}
                     initialNumToRender={5}
                     maxToRenderPerBatch={5}
                     windowSize={5}

src/components/LHNOptionsList/OptionRowLHN.js

@@ -1,8 +1,7 @@
 import _ from 'underscore';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {View, StyleSheet} from 'react-native';
-import lodashGet from 'lodash/get';
 import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -12,30 +11,22 @@ import MultipleAvatars from '../MultipleAvatars';
 import Hoverable from '../Hoverable';
 import DisplayNames from '../DisplayNames';
 import colors from '../../styles/colors';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import {withReportCommentDrafts} from '../OnyxProvider';
 import Text from '../Text';
 import SubscriptAvatar from '../SubscriptAvatar';
 import CONST from '../../CONST';
 import themeColors from '../../styles/themes/default';
-import SidebarUtils from '../../libs/SidebarUtils';
 import OfflineWithFeedback from '../OfflineWithFeedback';
 import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
-import * as Report from '../../libs/actions/Report';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     /** Style for hovered state */
     // eslint-disable-next-line react/forbid-prop-types
     hoverStyle: PropTypes.object,
 
-    /** The comment left by the user */
-    comment: PropTypes.string,
-
     /** The ID of the report that the option is for */
     reportID: PropTypes.string.isRequired,
 
@@ -50,29 +41,25 @@ const propTypes = {
 
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
-    ...withLocalizePropTypes,
+    /** The item that should be rendered */
+    // eslint-disable-next-line react/forbid-prop-types
+    optionItem: PropTypes.object,
 };
 
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     viewMode: 'default',
     onSelectRow: () => {},
-    isFocused: false,
     style: null,
-    comment: '',
+    optionItem: null,
+    isFocused: false,
 };
 
 function OptionRowLHN(props) {
-    const optionItem = SidebarUtils.getOptionData(props.reportID);
-    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
+    const localize = useLocalize();
 
-    useEffect(() => {
-        if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || props.isFocused) {
-            return;
-        }
-        Report.setReportWithDraft(props.reportID, true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const optionItem = props.optionItem;
+    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
 
     if (!optionItem) {
         return null;
@@ -161,7 +148,7 @@ function OptionRowLHN(props) {
                             (hovered || isContextMenuActive) && !props.isFocused ? props.hoverStyle : null,
                         ]}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        accessibilityLabel={props.translate('accessibilityHints.navigatesToChat')}
+                        accessibilityLabel={localize.translate('accessibilityHints.navigatesToChat')}
                     >
                         <View style={sidebarInnerRowStyle}>
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
@@ -189,7 +176,7 @@ function OptionRowLHN(props) {
                                 <View style={contentContainerStyles}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, styles.overflowHidden]}>
                                         <DisplayNames
-                                            accessibilityLabel={props.translate('accessibilityHints.chatUserDisplayNames')}
+                                            accessibilityLabel={localize.translate('accessibilityHints.chatUserDisplayNames')}
                                             fullTitle={optionItem.text}
                                             displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
                                             tooltipEnabled
@@ -204,7 +191,7 @@ function OptionRowLHN(props) {
                                         <Text
                                             style={alternateTextStyle}
                                             numberOfLines={1}
-                                            accessibilityLabel={props.translate('accessibilityHints.lastChatMessagePreview')}
+                                            accessibilityLabel={localize.translate('accessibilityHints.lastChatMessagePreview')}
                                         >
                                             {optionItem.alternateText}
                                         </Text>
@@ -238,15 +225,15 @@ function OptionRowLHN(props) {
                             {optionItem.hasDraftComment && (
                                 <View
                                     style={styles.ml2}
-                                    accessibilityLabel={props.translate('sidebarScreen.draftedMessage')}
+                                    accessibilityLabel={localize.translate('sidebarScreen.draftedMessage')}
                                 >
                                     <Icon src={Expensicons.Pencil} />
                                 </View>
                             )}
                             {!shouldShowGreenDotIndicator && optionItem.isPinned && (
                                 <View
                                     style={styles.ml2}
-                                    accessibilityLabel={props.translate('sidebarScreen.chatPinned')}
+                                    accessibilityLabel={localize.translate('sidebarScreen.chatPinned')}
                                 >
                                     <Icon src={Expensicons.Pin} />
                                 </View>
@@ -263,13 +250,6 @@ OptionRowLHN.propTypes = propTypes;
 OptionRowLHN.defaultProps = defaultProps;
 OptionRowLHN.displayName = 'OptionRowLHN';
 
-export default compose(
-    withLocalize,
-    withReportCommentDrafts({
-        propName: 'comment',
-        transformValue: (drafts, props) => {
-            const draftKey = `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${props.reportID}`;
-            return lodashGet(drafts, draftKey, '');
-        },
-    }),
-)(OptionRowLHN);
+export default React.memo(OptionRowLHN);
+
+export {propTypes, defaultProps};

src/components/LHNOptionsList/OptionRowLHNData.js

@@ -0,0 +1,132 @@
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import React, {useEffect, useRef, useMemo} from 'react';
+import {deepEqual} from 'fast-equals';
+import {withReportCommentDrafts} from '../OnyxProvider';
+import SidebarUtils from '../../libs/SidebarUtils';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../withCurrentReportID';
+import OptionRowLHN, {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './OptionRowLHN';
+import * as Report from '../../libs/actions/Report';
+import * as UserUtils from '../../libs/UserUtils';
+import participantPropTypes from '../participantPropTypes';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** If true will disable ever setting the OptionRowLHN to focused */
+    shouldDisableFocusOptions: PropTypes.bool,
+
+    /** List of users' personal details */
+    personalDetails: PropTypes.objectOf(participantPropTypes),
+
+    /** The preferred language for the app */
+    preferredLocale: PropTypes.string,
+
+    /** The full data of the report */
+    // eslint-disable-next-line react/forbid-prop-types
+    fullReport: PropTypes.object,
+
+    ...withCurrentReportIDPropTypes,
+    ...basePropTypes,
+};
+
+const defaultProps = {
+    shouldDisableFocusOptions: false,
+    personalDetails: {},
+    fullReport: {},
+    preferredLocale: CONST.LOCALES.DEFAULT,
+    ...withCurrentReportIDDefaultProps,
+    ...baseDefaultProps,
+};
+
+/*
+ * This component gets the data from onyx for the actual
+ * OptionRowLHN component.
+ * The OptionRowLHN component is memoized, so it will only
+ * re-render if the data really changed.
+ */
+function OptionRowLHNData(props) {
+    // We only want to pass a boolean to the memoized component,
+    // instead of a changing number (so we prevent unnecessary re-renders).
+    const isFocused = !props.shouldDisableFocusOptions && props.currentReportId === props.reportID;
+
+    const optionItemRef = useRef();
+    const optionItem = useMemo(() => {
+        // Note: ideally we'd have this as a dependent selector in onyx!
+        const item = SidebarUtils.getOptionData(props.fullReport, props.personalDetails, props.preferredLocale);
+        if (deepEqual(item, optionItemRef.current)) {
+            return optionItemRef.current;
+        }
+        optionItemRef.current = item;
+        return item;
+    }, [props.fullReport, props.preferredLocale, props.personalDetails]);
+
+    useEffect(() => {
+        if (!optionItem || optionItem.hasDraftComment || !props.comment || props.comment.length <= 0 || isFocused) {
+            return;
+        }
+        Report.setReportWithDraft(props.reportID, true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <OptionRowLHN
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {..._.omit(props, 'currentReportID', 'comment', 'personalDetails', 'preferredLocale', 'fullReport')}
+            isFocused={isFocused}
+            optionItem={optionItem}
+        />
+    );
+}
+
+OptionRowLHNData.propTypes = propTypes;
+OptionRowLHNData.defaultProps = defaultProps;
+OptionRowLHNData.displayName = 'OptionRowLHNData';
+
+/**
+ * @param {Object} [personalDetails]
+ * @returns {Object|undefined}
+ */
+const personalDetailsSelector = (personalDetails) =>
+    _.reduce(
+        personalDetails,
+        (finalPersonalDetails, personalData, accountID) => {
+            // It's OK to do param-reassignment in _.reduce() because we absolutely know the starting state of finalPersonalDetails
+            // eslint-disable-next-line no-param-reassign
+            finalPersonalDetails[accountID] = {
+                accountID: Number(accountID),
+                login: personalData.login,
+                displayName: personalData.displayName,
+                firstName: personalData.firstName,
+                avatar: UserUtils.getAvatar(personalData.avatar, personalData.accountID),
+            };
+            return finalPersonalDetails;
+        },
+        {},
+    );
+
+export default compose(
+    withCurrentReportID,
+    withReportCommentDrafts({
+        propName: 'comment',
+        transformValue: (drafts, props) => {
+            const draftKey = `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${props.reportID}`;
+            return lodashGet(drafts, draftKey, '');
+        },
+    }),
+    withOnyx({
+        fullReport: {
+            key: (props) => ONYXKEYS.COLLECTION.REPORT + props.reportID,
+        },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+            selector: personalDetailsSelector,
+        },
+        preferredLocale: {
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+        },
+    }),
+)(OptionRowLHNData);

src/libs/ReportActionsUtils.js

@@ -97,13 +97,14 @@ function hasCommentThread(reportAction) {
  * Returns the parentReportAction if the given report is a thread/task.
  *
  * @param {Object} report
+ * @param {Object} [allReportActionsParam]
  * @returns {Object}
  */
-function getParentReportAction(report) {
+function getParentReportAction(report, allReportActionsParam) {
     if (!report || !report.parentReportID || !report.parentReportActionID) {
         return {};
     }
-    return lodashGet(allReportActions, [report.parentReportID, report.parentReportActionID], {});
+    return lodashGet(allReportActionsParam || allReportActions, [report.parentReportID, report.parentReportActionID], {});
 }
 
 /**

src/libs/ReportUtils.js

@@ -2017,10 +2017,11 @@ function canSeeDefaultRoom(report, policies, betas) {
  * @param {Object} report
  * @param {Array<Object>} policies
  * @param {Array<String>} betas
+ * @param {Object} allReportActions
  * @returns {Boolean}
  */
-function canAccessReport(report, policies, betas) {
-    if (isThread(report) && ReportActionsUtils.isPendingRemove(ReportActionsUtils.getParentReportAction(report))) {
+function canAccessReport(report, policies, betas, allReportActions) {
+    if (isThread(report) && ReportActionsUtils.isPendingRemove(ReportActionsUtils.getParentReportAction(report, allReportActions))) {
         return false;
     }
 
@@ -2045,9 +2046,10 @@ function canAccessReport(report, policies, betas) {
  * @param {Object} iouReports
  * @param {String[]} betas
  * @param {Object} policies
+ * @param {Object} allReportActions
  * @returns {boolean}
  */
-function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouReports, betas, policies) {
+function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouReports, betas, policies, allReportActions) {
     const isInDefaultMode = !isInGSDMode;
 
     // Exclude reports that have no data because there wouldn't be anything to show in the option item.
@@ -2061,7 +2063,7 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouRep
         return false;
     }
 
-    if (!canAccessReport(report, policies, betas)) {
+    if (!canAccessReport(report, policies, betas, allReportActions)) {
         return false;
     }
 
@@ -2094,7 +2096,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;
     }