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)