Olá, alguem tem ideia de como posso usar o useContext(), mas não quero que meu component se re-renderize quando algum valor alterar na context ? pois esse component só utiliza uma função da context.
**Pessoal, consegui resolver, através dos eventos customizados com a API de CustomEvents do JavaScript **
Faz um bom tempo que não uso React, mas a finalidade do useContext não é justamente (entre outras coisas) reenderizar componentes quando houver mudança desse estado global? Ao menos é o que dá para entender da documentação
Não seria o caso de usar um reducer (useReducer) e ter um controle mais fino das mudanças de estado?
Será que está usando o useContext da forma correta?
De qualquer forma, existem várias técnicas de se evitar as renderizações, aqui tem algumas dicas. Mas você encontra facilmente vários artigos e vídeos que tratam sobre isso.
Obrigado pelo comentário, coloquei meu código e uma explicação mais detalhada no comentário acima, dá uma olhada se possível, estarei lendo os artigos citados.
Mas esse é exatamente o objetivo do context, passar dados para outros componentes que vão disparar uma re-renderização. Se você não quer causa uma re-renderização não tem necessidade de um context. Suas dúvida tá incompleta e confusa. Por favor, dê mais detalhes sobre qual resultado você quer alcançar. Eu mexe com React, sei bastante sobre contextApi, e talvez possa-lhe ajudar.
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
É 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.
Existe uma lib do React.js que chama-se useContextSelector. Ela permite selecionar campos específicos do seu contexto evitando a re-renderização do seu conteúdo.
LINK NPM: https://www.npmjs.com/package/use-context-selector