🚀 Melhore a Performance do Seu App React com o AbortController!

Victor Badaró — Sat, 07 Sep 2024 05:03:13 +0000

Se você trabalha com React, provavelmente já se deparou com a necessidade de fazer requisições HTTP dentro dos seus componentes. Mas como evitar requisições desnecessárias que podem impactar a performance do seu app e a experiência do usuário? A resposta pode estar no AbortController!

✨ O AbortController é uma API nativa do Javascript que permite cancelar uma requisição HTTP antes que ela seja finalizada. Isso é extremamente útil em cenários onde o componente que disparou a requisição se torna unmounted (é desmontado/retirado de tela - numa troca de página, por exemplo) antes do retorno da mesma, ou quando queremos evitar múltiplas requisições simultâneas em casos onde apenas a última resposta é relevante.

Como Utilizar o AbortController no React? 🤔

Criação do Controller: Dentro do useEffect, crie uma instância do AbortController e passe o signal para a sua requisição fetch.
Cancelamento da Requisição: No retorno da função useEffect, chame o método abort() para cancelar a requisição no unmount do componente.
Manuseio de Erros: Lembre-se de tratar o erro de "requisição abortada" para evitar mensagens desnecessárias no console.

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.exemplo.com/dados', { signal })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error('Erro na requisição:', error);
      }
    });

  return () => {
    /*
      Cancela a requisição se o componente for unmounted
      (for desmontado/sair da tela)
    */
    controller.abort();
  };
}, []);

💡 Com essa abordagem, você melhora a performance do seu app, evita bugs e garante uma experiência mais fluida para o usuário.

E você? Já utiliza o AbortController nos seus projetos? Compartilhe suas experiências e dicas nos comentários!

Como Criar um Botão de Submit Fora da tag

Victor Badaró — Tue, 08 Feb 2022 20:16:55 +0000

Nem sempre o melhor lugar para se colocar o botão de submit é dentro da tag <form>. Em alguns casos é preferível que ele esteja fora dessa tag (por questões de layout por exemplo).

Como fazer?

É muito simples. O próprio HTML já torna isso possível. De que forma? Basta seguir dois passos simples:

Declarar um id para o formulário

<form id="my-form">
...
</form>

Informar o id do formulário no atributo form do botão que irá submeter o formulário (esse botão pode estar em qualquer lugar na árvore de elementos. Dentro ou fora da tag form).

<button form="my-form">Submit Button</button>

Legal né? 🙂

DEV Community: Victor Badaró

🚀 Melhore a Performance do Seu App React com o AbortController!

Como Utilizar o AbortController no React? 🤔

Como Criar um Botão de Submit Fora da tag

Como fazer?