Anteriormente estaba viendo este error. Después de optimizar mi código, ya no lo veo. Descubrí el problema agregando la instrucción console.log() a la función render() del Componente que crea FlatList y la función que representa cada elemento en la Lista. Me di cuenta de que mi código volvía a representar previamente toda la FlatList y todos sus elementos cada vez que había un cambio de estado en cualquier componente de esa página (incluso un componente que no está relacionado con la FlatList). Solucioné esto convirtiendo varios componentes a PureComponents. Así es como se ve mi declaración de FlatList:

 <FlatList ref={(ref) => { this.flatListRef = ref; }} data={allPosts} initialNumToRender={7} renderItem={({ item }) => <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} /> } />

Tenga en cuenta que estoy devolviendo <Post /> que es un componente puro:

 import React, { PureComponent } from 'react'; class Post extends PureComponent { render() { ... } }

Esto asegura que FlatList vuelva a generar un solo si la publicación cambia. Cuando anteriormente estaba pasando una función normal a renderItem , es decir, una función que hace algo como esto:

 return ( <View> ... </View> );

Me di cuenta de que FlatList volvía a representar todos los elementos cada vez que cambiaba algún elemento. Ahora, al usar PureComponent, FlatList solo representa el nuevo elemento agregado a la lista (si la lista ya se está mostrando).

Todavía lleva relativamente mucho tiempo renderizar la lista completa la primera vez. Sin embargo, initialNumToRender garantiza que la pantalla se llene casi instantáneamente (mientras que los elementos restantes se procesan en segundo plano). Y lo que es más importante, después de esa representación inicial, FlatList solo tiene que representar un elemento a la vez (el elemento que cambia).

Encontré esta publicación muy útil).

Me acabo de dar cuenta de que esto también se explica aquí .

Me di cuenta de que la respuesta a esta pregunta no ofrece una solución para aquellos que usan componentes funcionales y ganchos. Encontré este problema y pude deshacerme de él usando el gancho "useMemo()"

 <FlatList keyExtractor={keyExtractor} data={productsState.products} renderItem={renderItem} /> const renderItem = ({ item }) => ( <ListItem title={item.ProductName} subtitle={(item.ProductQuantity) + " " + (item.QuantityType !== null ? item.QuantityType : " ") } bottomDivider topDivider chevron checkmark={checkMark} onLongPress={() => setCheckMark(!checkMark)} rightSubtitle={(item.Currency !== null ? item.Currency: " " ) + " " + (item.productCost !== null ? item.productCost: " " )} rightSubtitleStyle={{ marginTop: -20 }} badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }} /> )

La función renderItem es un cálculo costoso, porque es una lista larga para renderizar. En cambio, lo memorizo de la siguiente manera

 const memoizedValue = useMemo(() => renderItem, [productsState.product]); <FlatList keyExtractor={keyExtractor} data={productsState.products} renderItem={memoizedValue} /> const renderItem = ({ item }) => ( <ListItem title={item.ProductName} subtitle={(item.ProductQuantity) + " " + (item.QuantityType !== null ? item.QuantityType : " ") } bottomDivider topDivider chevron checkmark={checkMark} onLongPress={() => setCheckMark(!checkMark)} rightSubtitle={(item.Currency !== null ? item.Currency: " " ) + " " + (item.productCost !== null ? item.productCost: " " )} rightSubtitleStyle={{ marginTop: -20 }} badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }} /> )

No olvides importar useMemo desde reaccionar, para que esto funcione.

¡Buena suerte!

Si está utilizando un componente funcional, envolver el componente en memo es una buena manera de evitar renderizaciones innecesarias sin tener que pasar por la molestia de convertir un componente funcional en un componente de clase pura. Esta publicación lo explica más

sigue este ejemplo:

En el componente principal:

 import React from 'react'; import {FlatList} from 'react-native'; import PostCard from './PostCard'; export const NewsFeeds = props => { return ( <FlatList data={data} initialNumToRender={4} refreshing={loading} renderItem={_renderitem} /> ); }; const _renderitem = ({item}) => <PostCard item={item} />;

En el componente hijo

 import React, {memo} from 'react'; import {View} from 'react-native'; const PostCard = (props) => { return ( <View> </View> ); }; export default memo(PostCard);

Si está utilizando un componente de clase, asegúrese de que su componente sea un componente puro al extender React. PureComponent en su definición de clase

 class NewsFeeds extends React.PureComponent { render() { return ( <FlatList data={data} initialNumToRender={4} refreshing={loading} renderItem={_renderitem} /> ) } }