From 4c6a40f52b46aa2733dbf9036f538648aa47fa91 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Thu, 21 Sep 2023 19:06:25 +0200 Subject: [PATCH 1/3] Memoize expensive calls in ReportActionsList renderItem --- src/pages/home/report/ReportActionsList.js | 63 +++++++------------ .../report/ReportActionsListItemRenderer.js | 49 +++++++++++++++ 2 files changed, 71 insertions(+), 41 deletions(-) create mode 100644 src/pages/home/report/ReportActionsListItemRenderer.js diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 19270ff13f45..f3f40d34a0f5 100644 --- 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 ? ( - - ) : ( - ); }, diff --git a/src/pages/home/report/ReportActionsListItemRenderer.js b/src/pages/home/report/ReportActionsListItemRenderer.js new file mode 100644 index 000000000000..bed602397b8f --- /dev/null +++ b/src/pages/home/report/ReportActionsListItemRenderer.js @@ -0,0 +1,49 @@ +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 ReportActionItem from './ReportActionItem'; +import ReportActionItemParentAction from './ReportActionItemParentAction'; + +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 ? ( + + ) : ( + + ); +} + +export default memo(ReportActionsListItemRenderer); From 2c539dea3b783266a68b389d9a60b93ca8a9637d Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Thu, 21 Sep 2023 19:40:59 +0200 Subject: [PATCH 2/3] Add prop types --- .../report/ReportActionsListItemRenderer.js | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/pages/home/report/ReportActionsListItemRenderer.js b/src/pages/home/report/ReportActionsListItemRenderer.js index bed602397b8f..e63f954cefee 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.js +++ b/src/pages/home/report/ReportActionsListItemRenderer.js @@ -1,10 +1,44 @@ +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, @@ -46,4 +80,7 @@ function ReportActionsListItemRenderer({ ); } +ReportActionsListItemRenderer.propTypes = propTypes; +ReportActionsListItemRenderer.defaultProps = defaultProps; + export default memo(ReportActionsListItemRenderer); From a53e87150e94418209a93d9e33095f6af5c1e740 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Fri, 22 Sep 2023 10:25:50 +0200 Subject: [PATCH 3/3] Review fixes --- src/pages/home/report/ReportActionsListItemRenderer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsListItemRenderer.js b/src/pages/home/report/ReportActionsListItemRenderer.js index e63f954cefee..f70714076ad2 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.js +++ b/src/pages/home/report/ReportActionsListItemRenderer.js @@ -19,7 +19,7 @@ const propTypes = { /** Report for this action */ report: reportPropTypes.isRequired, - /* Whether the option has an outstanding IOU */ + /** Whether the option has an outstanding IOU */ hasOutstandingIOU: PropTypes.bool, /** Sorted actions prepared for display */ @@ -82,5 +82,6 @@ function ReportActionsListItemRenderer({ ReportActionsListItemRenderer.propTypes = propTypes; ReportActionsListItemRenderer.defaultProps = defaultProps; +ReportActionsListItemRenderer.displayName = 'ReportActionsListItemRenderer'; export default memo(ReportActionsListItemRenderer);