Adeus useEffect complexo: Simplificando requisições com TanStack Query

Se você já desenvolveu aplicações React por algum tempo, com certeza já escreveu aquele padrão repetitivo de código para buscar dados de uma API: criar estados para loading, error e data, e usar um useEffect para orquestrar tudo isso.

Embora funcione, essa abordagem escala mal. E se você precisar de cache? E se o usuário mudar de aba e voltar? E se a requisição falhar e você quiser tentar novamente?

É aqui que entra o TanStack Query.

O que é o TanStack Query?

O TanStack Query (frequentemente chamado apenas de React Query) é uma biblioteca de gerenciamento de estado assíncrono. Diferente do Redux ou Context API, que gerenciam o estado client-side (global), o React Query é especializado em gerenciar o estado server-side (dados que vêm de fora).

Ele automatiza o processo de:

Buscar dados (fetching).
Armazenar em cache.
Sincronizar e atualizar dados em segundo plano.

Instalação

Primeiro, adicione a biblioteca ao seu projeto:

npm install @tanstack/react-query

Configuração Inicial

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import App from './App'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>)

Como usar na prática

Vamos substituir aquela lógica manual de fetch pelo hook useQuery. Imagine que queremos listar posts de um blog.

1. Crie a função de busca

import axios from 'axios'

export async function getPosts() {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
  return response.data
}

2. Implemente o Componente

Agora, usamos o hook useQuery. Ele nos devolve propriedades mágicas como isLoading(carregando), isError(erro) e data(o resultado).

import { useQuery } from '@tanstack/react-query'
import { getPosts } from './api'

export function BlogPosts() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  })

  if (isLoading) {
    return <div>Carregando posts...</div>
  }

  if (isError) {
    return <div>Ocorreu um erro ao carregar os posts.</div>
  }

  return (
    <div className="container">
      <h1>Últimas Postagens</h1>
      <ul>
        {data?.map((post: any) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

Por que isso é melhor?

Repare que não usamos nenhum useState ou useEffect manualmente. Além do código mais limpo, você ganha "de brinde":

Window Focus Refetching: Se o usuário trocar de aba no navegador e voltar para o seu site, o React Query detecta isso e atualiza os dados automaticamente em background.
Cache: Se você desmontar esse componente e montá-lo novamente (navegar entre páginas), os dados aparecem instantaneamente porque estão em cache, sem tela de carregamento.
Retries: Se a internet do usuário falhar, a biblioteca tenta refazer a requisição automaticamente algumas vezes antes de disparar o erro.

Conclusão
O TanStack Query remove a complexidade do gerenciamento de dados assíncronos, permitindo que você foque na interface e na experiência do usuário. Se seu projeto React consome APIs, essa biblioteca é indispensável no seu cinto de utilidades.

Este post trata sobre:

#reactjs

#react

#tanstack

#tanstack query

#gerenciamentodeestados

#javascript

#typescript

Não há comentários ainda.