diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index e753ff4e9bd9e..c84e184f94ade 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -36,11 +36,6 @@ class BaseInvertedFlatList extends Component {
this.sizeMap = {};
}
- shouldComponentUpdate(prevProps) {
- // The FlatList itself should only re-render if items are added
- return prevProps.data.length !== this.props.data.length;
- }
-
/**
* Return default or previously cached height for
* a renderItem row
@@ -135,8 +130,10 @@ class BaseInvertedFlatList extends Component {
inverted
renderItem={this.renderItem}
getItemLayout={this.getItemLayout}
- removeClippedSubviews
bounces={false}
+ removeClippedSubviews
+ maxToRenderPerBatch={15}
+ updateCellsBatchingPeriod={40}
/>
);
}
diff --git a/src/page/home/report/ReportActionItem.js b/src/page/home/report/ReportActionItem.js
index a81e2e703280b..e3d6043b28858 100644
--- a/src/page/home/report/ReportActionItem.js
+++ b/src/page/home/report/ReportActionItem.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import ReportActionItemSingle from './ReportActionItemSingle';
import ReportActionPropTypes from './ReportActionPropTypes';
@@ -12,22 +12,13 @@ const propTypes = {
displayAsGroup: PropTypes.bool.isRequired,
};
-class ReportActionItem extends Component {
- shouldComponentUpdate(nextProps) {
- // If the grouping changes then we want to update the UI
- return nextProps.displayAsGroup !== this.props.displayAsGroup;
- }
-
- render() {
- return (
- <>
- {!this.props.displayAsGroup
- ?
- : }
- >
- );
- }
-}
+const ReportActionItem = props => (
+ <>
+ {!props.displayAsGroup
+ ?
+ : }
+ >
+);
ReportActionItem.propTypes = propTypes;
diff --git a/src/page/home/report/ReportActionItemGrouped.js b/src/page/home/report/ReportActionItemGrouped.js
index 10601f7aa761e..b8276ef8aaa73 100644
--- a/src/page/home/report/ReportActionItemGrouped.js
+++ b/src/page/home/report/ReportActionItemGrouped.js
@@ -10,19 +10,13 @@ const propTypes = {
action: PropTypes.shape(ReportActionPropTypes).isRequired,
};
-class ReportActionItemGrouped extends React.PureComponent {
- render() {
- const {action} = this.props;
- return (
-
-
-
-
-
- );
- }
-}
+const ReportActionItemGrouped = ({action}) => (
+
+
+
+
+
+);
ReportActionItemGrouped.propTypes = propTypes;
-
export default ReportActionItemGrouped;
diff --git a/src/page/home/report/ReportActionItemSingle.js b/src/page/home/report/ReportActionItemSingle.js
index 8d265780cd9e9..9a8e451f0760d 100644
--- a/src/page/home/report/ReportActionItemSingle.js
+++ b/src/page/home/report/ReportActionItemSingle.js
@@ -14,35 +14,31 @@ const propTypes = {
action: PropTypes.shape(ReportActionPropTypes).isRequired,
};
-class ReportActionItemSingle extends React.PureComponent {
- render() {
- const {action} = this.props;
- const avatarUrl = action.automatic
- ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
- : action.avatar;
- return (
-
-
-
-
- {_.map(action.person, (fragment, index) => (
-
- ))}
-
-
-
+const ReportActionItemSingle = ({action}) => {
+ const avatarUrl = action.automatic
+ ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
+ : action.avatar;
+ return (
+
+
+
+
+ {_.map(action.person, (fragment, index) => (
+
+ ))}
+
+
- );
- }
-}
+
+ );
+};
ReportActionItemSingle.propTypes = propTypes;
-
export default ReportActionItemSingle;