diff --git a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js index eb0b6cb32e0..011db86349e 100644 --- a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js +++ b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js @@ -270,6 +270,11 @@ const definitions: FeatureFlagDefinitions = { description: 'Enables access to the host tree in Fabric using DOM-compatible APIs.', }, + enableOptimisedVirtualizedCells: { + defaultValue: false, + description: + 'Removing unnecessary rerenders Virtualized cells after any rerenders of Virualized list. Works with strict=true option', + }, isLayoutAnimationEnabled: { defaultValue: true, description: diff --git a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js index 06297165f30..72a708f1e8a 100644 --- a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js +++ b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<> + * @generated SignedSource<<4ec8afb16cae6c04f166b0c28a906aff>> * @flow strict-local */ @@ -30,6 +30,7 @@ export type ReactNativeFeatureFlagsJsOnly = { animatedShouldDebounceQueueFlush: Getter, animatedShouldUseSingleOp: Getter, enableAccessToHostTreeInFabric: Getter, + enableOptimisedVirtualizedCells: Getter, isLayoutAnimationEnabled: Getter, shouldSkipStateUpdatesForLoopingAnimations: Getter, shouldUseAnimatedObjectForTransform: Getter, @@ -111,6 +112,11 @@ export const animatedShouldUseSingleOp: Getter = createJavaScriptFlagGe */ export const enableAccessToHostTreeInFabric: Getter = createJavaScriptFlagGetter('enableAccessToHostTreeInFabric', false); +/** + * Removing unnecessary rerenders Virtualized cells after any rerenders of Virualized list. Works with strict=true option + */ +export const enableOptimisedVirtualizedCells: Getter = createJavaScriptFlagGetter('enableOptimisedVirtualizedCells', false); + /** * Function used to enable / disabled Layout Animations in React Native. */ diff --git a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js index 6916c49c00d..cc05755b13e 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js +++ b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js @@ -8,6 +8,7 @@ * @format */ +import * as ReactNativeFeatureFlags from '../../react-native/src/private/featureflags/ReactNativeFeatureFlags'; import type {CellRendererProps, RenderItemType} from './VirtualizedListProps'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { @@ -53,7 +54,7 @@ type State = { ... }; -export default class CellRenderer extends React.Component< +export default class CellRenderer extends React.PureComponent< Props, State, > { @@ -68,12 +69,24 @@ export default class CellRenderer extends React.Component< props: Props, prevState: State, ): ?State { - return { - separatorProps: { - ...prevState.separatorProps, - leadingItem: props.item, - }, - }; + if (ReactNativeFeatureFlags.enableOptimisedVirtualizedCells()) { + if (props.item !== prevState.separatorProps.leadingItem) { + return { + separatorProps: { + ...prevState.separatorProps, + leadingItem: props.item, + }, + }; + } + return null; + } else { + return { + separatorProps: { + ...prevState.separatorProps, + leadingItem: props.item, + }, + }; + } } // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not