Normalmente costumamos consumir conteúdos de API’s utilizando a API padrão do Fetch ou Axios. Porém, quando precisamos falar sobre paginação e cache de dados, surgem novas tecnologias que podem nos ajudar nessas tarefas. Um exemplo muito utilizado atualmente é o React Query, que além de já possuir uma boa adesão da comunidade, também é utilizado em diversos projetos.
No entanto, essa lib apresenta alguns empecilhos — principalmente relacionados a cache e configurações — que fazem com que diversos usuários acabem optando por outros meios/bibliotecas. Buscando lidar com esses problemas surge uma nova tecnologia chamada React Hook SWR.
O que é o React SWR?
Primeiramente, devemos deixar bem claro que o SWR não substitui Fetch, Axios ou GraphQL, ele é apenas um wrapper que trará funcionalidades ao nosso software de maneira mais otimizada e dinâmica.
SWR significa Stale-While-Revalidate que, traduzindo para o português, significa algo como “Traga enquanto revalida”. Como o nome já diz, o SWR vai buscar os dados que já foram buscados anteriormente (cache) e vai estar sempre atento para buscar novos, caso existam. Isso não só melhora a experiência para o usuário, por possuir sempre dados bem atualizados em sua interface, como também torna a aplicação muito mais dinâmica, já que acaba não sendo necessário o uso de page refreshes ou manipulações desnecessárias.
Como o SWR mantém as informações sempre atualizadas?
Para que isso aconteça, o hook vai fazer chamadas a API para manter os dados sempre presentes e tudo de forma automática — porém pode ser configurado para que esse comportamento não aconteça — tornando a experiência muito melhor também para o programador.
O que o SWR entrega:
- Um rápido, leve e reusável data fetching;
- Cache integrado e evita redundância de requisição;
- Experiência Real-time;
- Suporte ao TypeScript;
- Possibilidade de ser utilizado no React Native;
- Navegação rápida entre páginas;
- Revalidação dos dados quando a tela recebe foco (revalidate-on-focus);
- Revalidação de dados quando se reconecta à Internet;
- Mutação de dados locais com (Optimistic UI);
- React Suspense;
- API agnóstica, pode ser utilizado com REST ou GraphQL;
- Back end agnóstico, não importa em qual linguagem foi implementado.
Na prática
Primeiramente precisamos instalar o SWR em nosso projeto. Após isso, criamos um hook customizado chamado useFetch, é com ele que vamos integrar com o hook do SWR e fazer a mágica acontecer.
No exemplo acima, estamos usando Axios mas você pode optar por fetch, por exemplo.
Como podemos ver no código, teremos sempre o retorno de data e error, que serão os dados utilizados para exibirmos as informações na tela ou exibir algum problema que possa vir acontecer durante as chamadas.
Após isso, basta chamarmos nosso custom hook em nosso componente e aproveitar todo o benefício de código limpo + performance que o SWR nos proporciona.
Note que o código fica muito mais simples do que no exemplo abaixo, que não usa SWR e depende de useEffect para fazer a chamada.
Mutate
Normalmente, quando criamos um novo dado em interface, temos que esperar uma resposta da API para que seja feita a atualização na interface. Com o SWR, isso se torna praticamente instantâneo e tudo graças ao mutate. Essa função do hook dá aquela sensação como se o sistema fosse muito rápido e todas as coisas se comunicam em tempo real mas, na verdade, o que estamos fazendo é “enganar” o usuário, exibindo uma informação que ainda está no front-end e que na maioria das vezes ainda está sendo processada na API.
Para não nos estendermos muito no artigo de hoje, não iremos mostrar como isso funciona na prática, mas deixaremos um link para a documentação no final do artigo, assim você consegue ver exemplos sobre e se aprofundar mais também.
Conclusão
Para o usuário, o React SWR torna a aplicação muito mais rápida e dinâmica, tornando a experiência muito mais agradável que o normal. O impacto real será para o programador, que vai conseguir contar com um código mais limpo, simples e eficiente em diversos aspectos que outras bibliotecas não conseguem entregar muito bem, além de possuir várias configurações que auxiliam o profissional a atender o padrão que busca para seu software.
Documentação do React Hook SWR
https://swr.vercel.app/pt-BR/docs/getting-started
Referências
https://blog.rocketseat.com.br/react-hook-swr-melhor-ux-no-consumo-de-api-no-front-end-react/
https://www.smashingmagazine.com/2020/06/introduction-swr-react-hooks-remote-data-fetching/
