Eu tenho uma FLATLIST em minha pagina HOME que consome informações de Produtos q · iegoSlomski

Respondendo a "Mas esse é exatamente o objetivo do context, pa..." dentro da publicação Context Api

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)

Programmer404

9 meses atrás

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

iegoSlomski

Autor

9 meses atrás

É desnecessário visto que meus produtos que aparece na HOME são independentes dos produtos que estão no carrinho (context), quando eu adiciono um produto no carrinho, os meus produtos da HOME são re-renderizados novamentes, e isso tá dando um delay absurdo tanto de feedback que foi adicionado mais um produto quanto no restante do app..., vou estudar mais sobre a implementação do useCallback e useMemo, já utilizei os dois mas as re-renders continuaram, talvez seja alguma parte errada que eu esteja fazendo, ou realmente não tem uma forma de escapar disso, e por causa disso eu tenha que trocar a tech pra redux.