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;