Como o TanStack Query melhorou meu código e a performance no Invdual

Em projetos anteriores, era comum eu usar o fetch em uma camada de service para chamar no componente. Às vezes encapsulava em funções auxiliares, outras vezes usava axios com alguns interceptadores, mas a lógica era basicamente a mesma: chamada manual, estados de loading e erro controlados por useState, e um useEffect com uma função assíncrona dentro. Funcionava, mas não escalava bem.

Com o tempo, fui percebendo alguns problemas frequentes:

• Requisições duplicadas em páginas com dados compartilhados
• Falta de cache, ou pior: tentativa manual de fazer cache que acabava bugando
• Muito código repetido para loading, error, refetch, cancelamento
• Comportamentos inconsistentes ao navegar entre páginas

Quando comecei o Invdual decidi que queria um código mais limpo e confiável. Foi aí que testei o TanStack Query (o famoso React Query), e o impacto foi imediato.

Performance no carregamento muito melhores

O cache automático do TanStack Query reduziu chamadas desnecessárias e deixou a navegação entre páginas muito mais rápida. Dados já buscados são reaproveitados — o que antes era uma nova requisição com fetch, agora é praticamente instantâneo.

Menos código, mais clareza

A lógica de loading, erro, e sucesso vem pronta com os hooks useQuery e useMutation.

Refetch automático e inteligente

Não preciso mais pensar quando revalidar os dados. O Query já faz isso por mim ao focar a aba, reconectar à internet ou chamar refetch() de forma declarativa.

Vale a pena?

Se seu projeto é pequeno e com poucas requisições, fetch resolve. Mas se você quer escalar, oferecer uma experiência mais fluida para o usuário e manter seu código limpo, o TanStack Query é uma ótima opção.

Pra quem não conhece meu projeto: invdual.com