Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

React Hook useEffect has missing dependencies

Referente ao curso React: lidando com arquivos estáticos, no capítulo Finalizando o projeto e atividade Ordenador

por Maurício Martins da Silva
| 341.6k xp | 80 posts

O compilador está apresentando o seguinte warning:

"React Hook useEffect has missing dependencies: 'ordenar', 'testaBusca', and 'testaFiltro'. Either include them or remove the dependency array react-hooks/exhaustive-deps"

Acredito que o mesmo warning foi apresentado no projeto do instrutor, pois dá pra ver no vídeo que o mesmo trecho está sublinhado. O código é esse:

useEffect(() => {
        const novaLista = cardapio.filter(item =>
             testaBusca(item.title) && testaFiltro(item.category.id));
             setLista(ordenar(novaLista));
    },[busca, filtro, ordenador]); //  <----- Esse é o array de dependencia que o compilador está alertando

Apesar do warning não ser impeditivo, não entendi o que está acontecendo.

1 resposta
solução!
por Neilton Seguins
| 327.2k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

Fala, Maurício! Tudo bom? O que acontece é que o useEffect() está usando funções que não estão sendo passadas na lista de dependências. De um modo geral isso não é recomendado. É difícil lembrar quais props ou state são usados por funções fora do efeito. É por isso que normalmente você deseja declarar funções necessárias para um efeito dentro dele. E é por isso que aparece esse warning, pois as funções testaBusca(), testaFiltro() e ordenar() são declaradas fora do useEffect(). Para este exemplo é suficiente indicar para o useEffect() que ele deve observar os efeitos e renderizar as atualizações apenas quando as props sofrerem alguma mudança.

Existem casos onde não é possível passar as funções para dentro de um efeito, e é preciso encontrar outros modos de lidar com isso. Na documentação do React tem um tópico sobre isso e vou deixar o link aqui embaixo.