Eu tenho uma FLATLIST em minha pagina HOME que consome informações de Produtos que tem na minha loja via Api, e em cada produto no Card tem um botao que quando pressionado aciona a função AddProductCart que eu pego do contexto para adicionar esse produto no carrinho, só que toda vez que eu aciono essa função minha FLATLIST se re-renderiza novamente desnecessariamente, sendo que apenas to precisando adicionar o produto no carrinho.
Esse é o código do component que é renderizado na FlatList:
import { Container, ProductImage, ProductDetails, AddToCartButton } from './styles';
import { AntDesign } from '@expo/vector-icons';
import { Text } from '../Text';
import { formatCurrency } from '../../utils/formatCurrency';
import { CartContext } from '../../contexts/CartContext';
import React, { memo, useContext } from 'react'
function CardProduct({ product }) {
const { addProductCart } = useContext(CartContext)
const handleAddCart =() => {
addProductCart(product);
}
console.log('render: ' + product["CODPROD"]);
return (
<Container>
<ProductImage
source={{ uri: `http://exemplo.tabnews:222/files/${product["DIRFOTOPROD"]?.toLowerCase()}` }}
resizeMode= { product["DIRFOTOPROD"] === 'not-found.png' ? 'cover' : 'contain' }
/>
<ProductDetails>
<Text size={15} weight="600">{product["DESCRICAO"]}</Text>
<Text size={15} weight="600" color="red">{product["CODPROD"]}</Text>
<Text size={14} color={'#666'} style={{ marginVertical: 8 }}>
{product["QTDISPONIVEL"]}
<Text size={12}> {product["EMBALAGEM"]}</Text>
</Text>
<Text size={14} weight="600" color="green">{formatCurrency(product["PTABELA"])}</Text>
</ProductDetails>
<AddToCartButton onPress={() => handleAddCart(product)} activeOpacity={0.6}>
<AntDesign name="pluscircleo" size={30} color='#D73035'/>
</AddToCartButton>
</ Container>
)
}
export default memo(CardProduct)
Não tem como evitar a renderição, pois isso é o que vai atualizar a lista com os novos elementos, portanto, não acredito que seja "desnecessário." Se tiver pesado demais as renderizações devido a muitos elementos no carrinho, o que você pode fazer é usar useMemo ou useCallback. Nesse caso acredito que o useMemo se encaxaria melhor. O useMemo vai armazenar o resultado de uma função em cache, assim a lista só vai ser renderizada quando a lista de items mudar (clicar no botão de adicionar novos elementos no carrinho). Não sei se você tá renderizando a Lista utilizando map, é o useMemo mesmo o ideal. Vi que você já usa o memo, mas vale lembrar que existem diferenças chaves entre memo e useMemo.
Dito tudo isso, não tem como evitar as renderizações quando clica no botão, pois a lista precisa ser atualizada com os novos valores, mas da pra skipar renderizações adjacentes provocadas por outras coisas que não seja o "botão de adicionar novos produtos" com useMemo