Merge pull request #27957 from janicduplessis/@janic/item-renderer

[NoQA] Memoize expensive calls in ReportActionsList renderItem
Expensify · Sep 22, 2023 · 887c7f8 · 887c7f8
2 parents 33b3c88 + a53e871
commit 887c7f8
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 41 deletions.
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
@@ -1,28 +1,26 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useState, useRef, useMemo} from 'react';
-import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import _ from 'underscore';
+import CONST from '../../../CONST';
 import InvertedFlatList from '../../../components/InvertedFlatList';
-import compose from '../../../libs/compose';
-import styles from '../../../styles/styles';
-import * as ReportUtils from '../../../libs/ReportUtils';
-import * as Report from '../../../libs/actions/Report';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import {withPersonalDetails} from '../../../components/OnyxProvider';
-import ReportActionItem from './ReportActionItem';
-import ReportActionItemParentAction from './ReportActionItemParentAction';
 import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView';
-import variables from '../../../styles/variables';
-import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
-import reportActionPropTypes from './reportActionPropTypes';
-import CONST from '../../../CONST';
-import reportPropTypes from '../../reportPropTypes';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import useLocalize from '../../../hooks/useLocalize';
 import useNetwork from '../../../hooks/useNetwork';
+import useReportScrollManager from '../../../hooks/useReportScrollManager';
 import DateUtils from '../../../libs/DateUtils';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import * as Report from '../../../libs/actions/Report';
+import compose from '../../../libs/compose';
+import styles from '../../../styles/styles';
+import variables from '../../../styles/variables';
+import reportPropTypes from '../../reportPropTypes';
 import FloatingMessageCounter from './FloatingMessageCounter';
-import useReportScrollManager from '../../../hooks/useReportScrollManager';
+import ReportActionsListItemRenderer from './ReportActionsListItemRenderer';
+import reportActionPropTypes from './reportActionPropTypes';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -294,33 +292,16 @@ function ReportActionsList({
             } else {
                 shouldDisplayNewMarker = reportAction.reportActionID === currentUnreadMarker;
             }
-
-            const shouldDisplayParentAction =
-                reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
-                ReportUtils.isChatThread(report) &&
-                !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report));
-
-            return shouldDisplayParentAction ? (
-                <ReportActionItemParentAction
-                    shouldHideThreadDividerLine={shouldDisplayParentAction && shouldHideThreadDividerLine}
-                    reportID={report.reportID}
-                    parentReportID={`${report.parentReportID}`}
-                    shouldDisplayNewMarker={shouldDisplayNewMarker}
-                />
-            ) : (
-                <ReportActionItem
-                    shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+            return (
+                <ReportActionsListItemRenderer
+                    reportAction={reportAction}
+                    index={index}
                     report={report}
-                    action={reportAction}
-                    displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)}
-                    shouldDisplayNewMarker={shouldDisplayNewMarker}
-                    shouldShowSubscriptAvatar={
-                        (ReportUtils.isPolicyExpenseChat(report) || ReportUtils.isExpenseReport(report)) &&
-                        _.contains([CONST.REPORT.ACTIONS.TYPE.IOU, CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW], reportAction.actionName)
-                    }
-                    isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
                     hasOutstandingIOU={hasOutstandingIOU}
-                    index={index}
+                    sortedReportActions={sortedReportActions}
+                    mostRecentIOUReportActionID={mostRecentIOUReportActionID}
+                    shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+                    shouldDisplayNewMarker={shouldDisplayNewMarker}
                 />
             );
         },

diff --git a/src/pages/home/report/ReportActionsListItemRenderer.js b/src/pages/home/report/ReportActionsListItemRenderer.js
@@ -0,0 +1,87 @@
+import PropTypes from 'prop-types';
+import React, {memo} from 'react';
+import _ from 'underscore';
+import CONST from '../../../CONST';
+import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import reportPropTypes from '../../reportPropTypes';
+import ReportActionItem from './ReportActionItem';
+import ReportActionItemParentAction from './ReportActionItemParentAction';
+import reportActionPropTypes from './reportActionPropTypes';
+
+const propTypes = {
+    /** All the data of the action item */
+    reportAction: PropTypes.shape(reportActionPropTypes).isRequired,
+
+    /** Position index of the report action in the overall report FlatList view */
+    index: PropTypes.number.isRequired,
+
+    /** Report for this action */
+    report: reportPropTypes.isRequired,
+
+    /** Whether the option has an outstanding IOU */
+    hasOutstandingIOU: PropTypes.bool,
+
+    /** Sorted actions prepared for display */
+    sortedReportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)).isRequired,
+
+    /** The ID of the most recent IOU report action connected with the shown report */
+    mostRecentIOUReportActionID: PropTypes.string,
+
+    /** If the thread divider line should be hidden */
+    shouldHideThreadDividerLine: PropTypes.bool.isRequired,
+
+    /** Should we display the new marker on top of the comment? */
+    shouldDisplayNewMarker: PropTypes.bool.isRequired,
+};
+
+const defaultProps = {
+    mostRecentIOUReportActionID: '',
+    hasOutstandingIOU: false,
+};
+
+function ReportActionsListItemRenderer({
+    reportAction,
+    index,
+    report,
+    hasOutstandingIOU,
+    sortedReportActions,
+    mostRecentIOUReportActionID,
+    shouldHideThreadDividerLine,
+    shouldDisplayNewMarker,
+}) {
+    const shouldDisplayParentAction =
+        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
+        ReportUtils.isChatThread(report) &&
+        !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report));
+
+    return shouldDisplayParentAction ? (
+        <ReportActionItemParentAction
+            shouldHideThreadDividerLine={shouldDisplayParentAction && shouldHideThreadDividerLine}
+            reportID={report.reportID}
+            parentReportID={`${report.parentReportID}`}
+            shouldDisplayNewMarker={shouldDisplayNewMarker}
+        />
+    ) : (
+        <ReportActionItem
+            shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+            report={report}
+            action={reportAction}
+            displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)}
+            shouldDisplayNewMarker={shouldDisplayNewMarker}
+            shouldShowSubscriptAvatar={
+                (ReportUtils.isPolicyExpenseChat(report) || ReportUtils.isExpenseReport(report)) &&
+                _.contains([CONST.REPORT.ACTIONS.TYPE.IOU, CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW], reportAction.actionName)
+            }
+            isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
+            hasOutstandingIOU={hasOutstandingIOU}
+            index={index}
+        />
+    );
+}
+
+ReportActionsListItemRenderer.propTypes = propTypes;
+ReportActionsListItemRenderer.defaultProps = defaultProps;
+ReportActionsListItemRenderer.displayName = 'ReportActionsListItemRenderer';
+
+export default memo(ReportActionsListItemRenderer);