diff --git a/Examples/UIExplorer/js/FlatListExample.js b/Examples/UIExplorer/js/FlatListExample.js index 080cf6c35..be147580f 100644 --- a/Examples/UIExplorer/js/FlatListExample.js +++ b/Examples/UIExplorer/js/FlatListExample.js @@ -148,7 +148,6 @@ class FlatListExample extends React.PureComponent { ref={this._captureRef} refreshing={false} renderItem={this._renderItemComponent} - shouldItemUpdate={this._shouldItemUpdate} viewabilityConfig={VIEWABILITY_CONFIG} /> @@ -169,15 +168,6 @@ class FlatListExample extends React.PureComponent { /> ); }; - _shouldItemUpdate(prev, next) { - /** - * Note that this does not check state.horizontal or state.fixedheight - * because we blow away the whole list by changing the key in those cases. - * Make sure that you do the same in your code, or incorporate all relevant - * data into the item data, or skip this optimization entirely. - */ - return prev.item !== next.item; - } // This is called when items change viewability by scrolling into or out of // the viewable area. _onViewableItemsChanged = (info: { diff --git a/Examples/UIExplorer/js/MultiColumnExample.js b/Examples/UIExplorer/js/MultiColumnExample.js index 9b4477240..3427c8aeb 100644 --- a/Examples/UIExplorer/js/MultiColumnExample.js +++ b/Examples/UIExplorer/js/MultiColumnExample.js @@ -107,7 +107,6 @@ class MultiColumnExample extends React.PureComponent { onRefresh={() => alert('onRefresh: nothing to refresh :P')} refreshing={false} renderItem={this._renderItemComponent} - shouldItemUpdate={this._shouldItemUpdate} disableVirtualization={!this.state.virtualized} onViewableItemsChanged={this._onViewableItemsChanged} legacyImplementation={false} @@ -127,11 +126,6 @@ class MultiColumnExample extends React.PureComponent { /> ); }; - _shouldItemUpdate(prev, next) { - // Note that this does not check state.fixedHeight because we blow away the whole list by - // changing the key anyway. - return prev.item !== next.item; - } // This is called when items change viewability by scrolling into or out of the viewable area. _onViewableItemsChanged = (info: { changed: Array<{ diff --git a/Libraries/CustomComponents/Lists/FlatList.js b/Libraries/CustomComponents/Lists/FlatList.js index daf99d33c..2f7bd1536 100644 --- a/Libraries/CustomComponents/Lists/FlatList.js +++ b/Libraries/CustomComponents/Lists/FlatList.js @@ -354,19 +354,6 @@ class FlatList extends React.PureComponent, vo } }; - _shouldItemUpdate = (prev, next) => { - const {numColumns, shouldItemUpdate} = this.props; - if (numColumns > 1) { - return prev.item.length !== next.item.length || - prev.item.some((prevItem, ii) => shouldItemUpdate( - {item: prevItem, index: prev.index + ii}, - {item: next.item[ii], index: next.index + ii}, - )); - } else { - return shouldItemUpdate(prev, next); - } - }; - render() { if (this.props.legacyImplementation) { return ; @@ -379,7 +366,6 @@ class FlatList extends React.PureComponent, vo getItemCount={this._getItemCount} keyExtractor={this._keyExtractor} ref={this._captureRef} - shouldItemUpdate={this._shouldItemUpdate} onViewableItemsChanged={this.props.onViewableItemsChanged && this._onViewableItemsChanged} /> ); diff --git a/Libraries/CustomComponents/Lists/MetroListView.js b/Libraries/CustomComponents/Lists/MetroListView.js index 935241214..73e8a9b46 100644 --- a/Libraries/CustomComponents/Lists/MetroListView.js +++ b/Libraries/CustomComponents/Lists/MetroListView.js @@ -62,7 +62,6 @@ type NormalProps = { refreshing?: boolean, }; type DefaultProps = { - shouldItemUpdate: (curr: {item: Item}, next: {item: Item}) => boolean, keyExtractor: (item: Item) => string, }; type Props = NormalProps & DefaultProps; @@ -90,7 +89,6 @@ class MetroListView extends React.Component { ); } static defaultProps: DefaultProps = { - shouldItemUpdate: () => true, keyExtractor: (item, index) => item.key || index, renderScrollComponent: (props: Props) => { if (props.onRefresh) { @@ -114,7 +112,7 @@ class MetroListView extends React.Component { this.props, { ds: new ListView.DataSource({ - rowHasChanged: (itemA, itemB) => this.props.shouldItemUpdate({item: itemA}, {item: itemB}), + rowHasChanged: (itemA, itemB) => true, sectionHeaderHasChanged: () => true, getSectionHeaderData: (dataBlob, sectionID) => this.state.sectionHeaderData[sectionID], }), diff --git a/Libraries/CustomComponents/Lists/SectionList.js b/Libraries/CustomComponents/Lists/SectionList.js index 71a9dcbca..c3b64114f 100644 --- a/Libraries/CustomComponents/Lists/SectionList.js +++ b/Libraries/CustomComponents/Lists/SectionList.js @@ -109,13 +109,6 @@ type OptionalProps> = { * Set this true while waiting for new data from a refresh. */ refreshing?: ?boolean, - /** - * This is an optional optimization to minimize re-rendering items. - */ - shouldItemUpdate: ( - prevProps: {item: Item, index: number}, - nextProps: {item: Item, index: number} - ) => boolean, /** * Makes section headers stick to the top of the screen until the next one pushes it off. Only * enabled by default on iOS because that is the platform standard there. diff --git a/Libraries/CustomComponents/Lists/VirtualizedList.js b/Libraries/CustomComponents/Lists/VirtualizedList.js index ffdc7e3b8..85839147c 100644 --- a/Libraries/CustomComponents/Lists/VirtualizedList.js +++ b/Libraries/CustomComponents/Lists/VirtualizedList.js @@ -123,10 +123,6 @@ type OptionalProps = { * Render a custom scroll component, e.g. with a differently styled `RefreshControl`. */ renderScrollComponent: (props: Object) => React.Element, - shouldItemUpdate: ( - props: {item: Item, index: number}, - nextProps: {item: Item, index: number} - ) => boolean, /** * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`. @@ -290,10 +286,6 @@ class VirtualizedList extends React.PureComponent { return ; } }, - shouldItemUpdate: ( - props: {item: Item, index: number}, - nextProps: {item: Item, index: number}, - ) => true, updateCellsBatchingPeriod: 50, windowSize: 21, // multiples of length }; @@ -624,9 +616,9 @@ class VirtualizedList extends React.PureComponent { if (dt > 500 && this._scrollMetrics.dt > 500 && (contentLength > (5 * visibleLength)) && !this._hasWarned.perf) { infoLog( - 'VirtualizedList: You have a large list that is slow to update - make sure ' + - 'shouldItemUpdate is implemented effectively and consider getItemLayout, PureComponent, ' + - 'etc.', + 'VirtualizedList: You have a large list that is slow to update - make sure your ' + + 'renderItem function renders components that follow React performance best practices ' + + 'like PureComponent, shouldComponentUpdate, etc.', {dt, prevDt: this._scrollMetrics.dt, contentLength}, ); this._hasWarned.perf = true; @@ -760,20 +752,11 @@ class CellRenderer extends React.Component { parentProps: { renderItem: renderItemType, getItemLayout?: ?Function, - shouldItemUpdate: ( - props: {item: Item, index: number}, - nextProps: {item: Item, index: number} - ) => boolean, }, }; componentWillUnmount() { this.props.onUnmount(this.props.cellKey); } - shouldComponentUpdate(nextProps, nextState) { - const curr = {item: this.props.item, index: this.props.index}; - const next = {item: nextProps.item, index: nextProps.index}; - return nextProps.parentProps.shouldItemUpdate(curr, next); - } render() { const {item, index, parentProps} = this.props; const {renderItem, getItemLayout} = parentProps; diff --git a/Libraries/CustomComponents/Lists/VirtualizedSectionList.js b/Libraries/CustomComponents/Lists/VirtualizedSectionList.js index 291e4c96d..e0154e941 100644 --- a/Libraries/CustomComponents/Lists/VirtualizedSectionList.js +++ b/Libraries/CustomComponents/Lists/VirtualizedSectionList.js @@ -113,13 +113,6 @@ type OptionalProps = { * Set this true while waiting for new data from a refresh. */ refreshing?: ?boolean, - /** - * This is an optional optimization to minimize re-rendering items. - */ - shouldItemUpdate: ( - prevProps: {item: Item, index: number}, - nextProps: {item: Item, index: number} - ) => boolean, }; export type Props = @@ -249,14 +242,6 @@ class VirtualizedSectionList return null; } - _shouldItemUpdate = (prev, next) => { - const {shouldItemUpdate} = this.props; - if (!shouldItemUpdate || shouldItemUpdate(prev, next)) { - return true; - } - return this._getSeparatorComponent(prev.index) !== this._getSeparatorComponent(next.index); - } - _computeState(props: Props): State { const offset = props.ListHeaderComponent ? 1 : 0; const stickyHeaderIndices = []; @@ -278,7 +263,6 @@ class VirtualizedSectionList keyExtractor: this._keyExtractor, onViewableItemsChanged: props.onViewableItemsChanged ? this._onViewableItemsChanged : undefined, - shouldItemUpdate: this._shouldItemUpdate, stickyHeaderIndices: props.stickySectionHeadersEnabled ? stickyHeaderIndices : undefined, }, }; diff --git a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap index 216ae57ab..19591edab 100644 --- a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap +++ b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap @@ -52,7 +52,6 @@ exports[`FlatList renders all the bells and whistles 1`] = ` renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} - shouldItemUpdate={[Function]} stickyHeaderIndices={Array []} updateCellsBatchingPeriod={50} windowSize={21} @@ -145,7 +144,6 @@ exports[`FlatList renders empty list 1`] = ` renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} - shouldItemUpdate={[Function]} stickyHeaderIndices={Array []} updateCellsBatchingPeriod={50} windowSize={21} @@ -176,7 +174,6 @@ exports[`FlatList renders null list 1`] = ` renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} - shouldItemUpdate={[Function]} stickyHeaderIndices={Array []} updateCellsBatchingPeriod={50} windowSize={21} @@ -219,7 +216,6 @@ exports[`FlatList renders simple list 1`] = ` renderItem={[Function]} renderScrollComponent={[Function]} scrollEventThrottle={50} - shouldItemUpdate={[Function]} stickyHeaderIndices={Array []} updateCellsBatchingPeriod={50} windowSize={21} diff --git a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap index e91124aae..8c564adb0 100644 --- a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap +++ b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap @@ -52,7 +52,6 @@ exports[`SectionList rendering empty section headers is fine 1`] = ` }, ] } - shouldItemUpdate={[Function]} stickyHeaderIndices={ Array [ 0, @@ -179,7 +178,6 @@ exports[`SectionList renders all the bells and whistles 1`] = ` }, ] } - shouldItemUpdate={[Function]} stickyHeaderIndices={ Array [ 1, @@ -282,7 +280,6 @@ exports[`SectionList renders empty list 1`] = ` renderScrollComponent={[Function]} scrollEventThrottle={50} sections={Array []} - shouldItemUpdate={[Function]} stickyHeaderIndices={Array []} stickySectionHeadersEnabled={true} updateCellsBatchingPeriod={50}