Olá Fabrício,

Quando gerenciamos um estado que é referenciado no useEffect e o componente é renderizado novamente ele irá chamar a API se o estado na dependecy prop mudar; Isso não é desejado em um cenário real, principalmente pq você irá fzer várias chamadas desnecessárias.

Para evitar esse comportamento existem algumas soluções.

Solução 1 (cache)

A solução mais simples é controla a chamada de API no componente mais externo (o primeiro pai e então passar para baixo).

Para evitar a renderização por conta dos dados, recomendo a utilização do o useMemo ou memo (que são hooks legais para sanar cache de informações).

Esse uso é deve ser feito com cautela e é necessário entender a estrutura do projeto e como os componentes estão organizados

A grande desvantagem desse método é o chamado prop-drilling ( ficar passando propriedades de componente para componente)

Solução 2 (Zustand e outros gerenciadores de estado)

Uma outra solução interessante é controlado o estado global da aplicação por fora do componente, isso é uma boa solução mas pode se tornar complexa demais a depender do que está fazendo ou sabe sobre essa ferramentas.

Solução 3 (HTTP State) - ReactQuery

A melhor ideia para controlar chamadas http no front é sempre ter o controle do http-state fora do componente de maneira melhor elaborada.

Nesse caso, a melhor opção sem dúvidas é utilizar o React query que fornece vários hooks e soluções prontas para cache de chamadas e etc.

O grande problema é que no ínicio do aprendizado pode ser difícil entender como ele funciona.