[Dúvida] Por que o useEffect reclama de

2
respostas

Referente ao curso React: gerenciamento de estados globais com ContextAPI, no capítulo Finalizando a tela de feira e atividade Contando quantidade de produtos

por Matheus Ricardo Uihara Zingarelli

| 252.1k xp | 324 posts

Olá.

Nesta, aula, utilizamos o useEffect para atualizar a quantidade de items no carrinho, com o seguinte código:

useEffect(() => {
   const novaQuantidade = carrinho.reduce((contador, produto) => contador + produto.quantidade, 0);
   setQuantidadeProdutos(novaQuantidade);
 }, [carrinho, setQuantidadeProdutos]);

Foi necessário colocar no array de dependências do useEffect o setQuantidadeProdutos, senão o compilador dá um warning de "missing dependency". O instrutor explicou sobre esse warning, mas foi muito vago e eu não entendi.

Por favor, qual o motivo de ter que inserir o setQuantidadeProdutos? Sendo que o que queríamos era só "escutar" mudanças em carrinho.

Obrigado.

2 respostas

por Danilo O. Pinheiro

| 1149.5k xp | 42 posts

08/02/2023

Na verdade, use o efeito esperando o estado possível e a variável props como array de dependências, porque ele possui regras eslint definidas para ele.

useEffect está detectando que você tem muitas variáveis props, mas você está usando apenas 1 (props.show) na matriz de dependência. É por isso que está sugerindo um aviso para adicionar todos ou removê-los.

Solução

1- Adicione todos os props no array de dependências como [props.show, props.hide ... etc]

2- Ou você pode simplesmente ignorar este aviso adicionando esta linha antes da matriz de dependência

por Matheus Ricardo Uihara Zingarelli

| 252.1k xp | 324 posts

13/02/2023

Oi Danilo, agradeço por sua resposta, mas eu li e reli e não entendi não :S

Pelo que eu vi depois na aula e em outras fontes, esse warning seria porque estou usando uma função dentro do useEffect, só que ela não foi definida dentro dele, então o useEffect não sabe se essa função depende de alguma outra variável para execução.

Esse não foi o caso no curso, mas poderia ocorrer em outra situação. Então colocar a função dentro do array de dependências ajuda o React a verificar se a função usa alguma variável que pode mudar (o que mudaria a função em si), para que o useEffect atue da maneira esperada.