Não é um erro que impeça a aplicação de funcionar, mas o Hook está 'reclamando', e eu só gostaria de entender o porquê. Meu useEffect está assim, e a IDE sublinha o array de dependências e me passa a mensagem que colei o título.
useEffect(() => {
const novaLista = cardapio.filter(
(item) => testaBusca(item.title) && testaFiltro(item.category.id)
);
setLista(ordenar(novaLista));
}, [busca, filtro, ordenador]);hoje, com a Alura e o Google Gemini
Olá, Wagner! Tudo bom?
Realmente essa é apenas uma mensagem de alerta, pois no array de dependências você está passando as props que as funções de callback testaBusca( ), testaFiltro( ) e ordenar( ) utilizam. Uma possível solução, segundo a documentação do React, seria declarar essas funções dentro do useEffect( ), isso faria com que o hook parasse de reclamar.
A questão é que quando você declara um argumento para o array de dependências, ele deve incluir todos os valores usados dentro do callback e participar do fluxo de dados React. Isso inclui props, state e qualquer coisa derivada deles.
É seguro omitir uma função da lista de dependências somente se nada nela (ou as funções chamadas por ela) referenciar props, state ou valores derivados deles.
Contudo, a documentação também diz que:
" Se a função que você está chamando é um cálculo puro e é seguro ligar enquanto renderiza, você pode chamá-la fora do efeito em vez disso, e fazer o efeito depender do valor retornado."
Abraços e bons estudos!