Olá, sou o Ligeiro e esse é o The Right Way, onde nós aprendemos sobre tecnologia da forma correta. Nesse post, nós vamos falar sobre polling em JavaScript e como implementá-lo da melhor forma possível.

Mas antes de começarmos, o que é polling? Polling é uma estratégia de atualização em tempo real em que um cliente envia repetidamente solicitações para um servidor em intervalos regulares para obter os dados mais recentes. Isso é útil quando você está trabalhando com uma aplicação que não suporta WebSockets ou outros protocolos de comunicação em tempo real entre o browser e o servidor.

Agora, vamos ver como podemos implementar polling em JavaScript. Primeiro, precisamos entender que polling consiste em ter um temporizador na nossa UI que envia uma solicitação para o servidor em intervalos regulares para obter os dados mais recentes. Vamos implementar isso em uma aplicação simples usando React.

Vamos criar uma função assíncrona chamada startPolling que fará uma solicitação para obter os dados mais recentes e, em seguida, agendará uma nova solicitação usando setTimeout. Isso garante que as solicitações sejam enviadas após o retorno de cada solicitação anterior, em vez de enviar solicitações em paralelo usando setInterval.

Agora, vamos ver como podemos parar o polling quando a nossa UI for desativada. Para fazer isso, podemos usar o comportamento pouco usado do useEffect do React, que é o retorno de uma função. Essa função será executada quando a nossa UI for desativada, ou seja, quando o componente for removido da UI. Podemos usar essa função para parar o temporizador usando clearTimeout.

Por fim, vamos ver como podemos trocar os componentes usando um estado gerenciado. Vamos criar um novo componente chamado ToggleComponent que terá um link que, quando clicado, trocará o componente ativo entre o MessageComponent e o OtherComponent. Isso nos permitirá testar o comportamento do polling e do cleanup.

E aqui está o código completo:

import React, { useEffect, useState } from 'react';

const MessageComponent = () => {
  const [messages, setMessages] = useState([]);

  const startPolling = async () => {
    const response = await loadMessages();
    setMessages(response.messages);
    const timeout = setTimeout(startPolling, 1000);
    return () => clearTimeout(timeout);
  };

  useEffect(() => {
    startPolling();
  }, []);

  return (
    <div>
      {messages.map((message) => (
        <p key={message.id}>{message.text}</p>
      ))}
    </div>
  );
};

const OtherComponent = () => <div>Outro componente</div>;

const ToggleComponent = ({ activeComponent }) => {
  const [toggle, setToggle] = useState(false);

  const handleToggle = () => {
    setToggle((prevToggle) => !prevToggle);
  };

  return (
    <div>
      <a href="#" onClick={(ev) => {
        ev.preventDefault();
        setActiveComponent((prevComponent) => (prevComponent === MessageComponent ? OtherComponent : MessageComponent));
      }}>Toggle</a>
      {activeComponent}
    </div>
  );
};

const App = () => {
  const [activeComponent, setActiveComponent] = useState(MessageComponent);

  return (
    <div>
      <ToggleComponent activeComponent={activeComponent} />
    </div>
  );
};

export default App;

Esse blog post foi escrito utilizando AI ( especificamente whisper-large ) com o projeto https://github.com/S4mpl3r/youtube2blog.

O vídeo abaixo foi transcrito e utilizado como base para gerar o texto: