Resumen

Imagine un componente que represente una diferencia (como texto) de la fecha actual (nueva Fecha()) y la fecha dada como accesorio (siempre la misma).

Este componente se representa en una FlatList y se memoriza con

areEqual = () => true // because the given prop is always the same.

Si quiero volver a renderizar el elemento al actualizar FlatList, lo hago

extraData={isRefreshing}

pero, como los elementos renderizados se memorizan, no recibo ninguna actualización. ¿Algunas ideas?

Mi elemento memorizado

Implementé un componente, Tarjeta, que se representará en una FlatList. Para evitar problemas de rendimiento, lo he memorizado (porque es una buena práctica memorizar elementos que se representan en listas).

 function Card({ description, location, date, images }) { ... return ( <View> ... <Text>{getReadableTimeSince(date)}</Text> {/* will display something like '2 hours ago' or '5 minutes ago'... */} </View> ); } function areCardPropsEqual(prevProps, nextProps) { return prevProps.description === nextProps.description; // the only editable data of a card } export default memo(Card, areCardPropsEqual);

Extraer para actualizar + FlatList con extraData

Ahora, en mi pantalla, estoy representando una lista de publicaciones, usando el componente Tarjeta. Mi propósito es proporcionar un mecanismo de extracción para actualizar, para poder obtener nuevas publicaciones y actualizar los datos de los elementos ya representados (la fecha desde).

Esta es mi pantalla:

 const [posts, setPosts] = useState([{ date: new Date() }]); const [isRefreshing, setIsRefreshing] = useState(false); const handleOnRefresh = async () => { setIsRefreshing(true); try { const newPosts = await api.getNewPosts(); setPosts((prevPosts) => [...newPosts, ...prevPosts]); } catch(err) { ... } setIsRefreshing(false); } const renderRefreshControl = () => ( <RefreshControl refreshing={isRefreshing} colors={[ ... ]} tintColor={colors.primary} onRefresh={handleOnRefresh} progressViewOffset={20} /> ); return ( <FlatList ... data={posts} extraData={isRefreshing} // <----- LOOK AT THIS refreshControl={renderRefreshControl()} /> );

Problema

Como puede ver, estoy pasando la propiedad extraData para generar una nueva representación en los elementos ya representados.

Entonces, si por ejemplo, la fecha de una de las tarjetas renderizadas muestra "hace 5 segundos", entonces, después de la actualización, mostrará "hace 7 segundos". Solo el comportamiento típico de las aplicaciones de redes sociales.

Pero, debido a la memorización, no se vuelve a renderizar. ¿Cómo puedo arreglar esto?