Skip to main content

Polling

Polling в React — это техника, при которой клиент (например, веб-приложение) периодически отправляет запросы на сервер для получения обновленных данных. Это полезно, когда нужно поддерживать актуальность данных в реальном времени, но использование более продвинутых технологий, таких как WebSockets или Server-Sent Events (SSE), невозможно или нецелесообразно.

Как реализовать Polling в React:​

В React polling можно реализовать с помощью встроенных методов, таких как setInterval, или с использованием библиотек для управления состоянием и запросами, например, React Query или Apollo Client.

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

function PollingExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    // Первый запрос
    fetchData();

    // Polling: запрос каждые 5 секунд
    const intervalId = setInterval(fetchData, 5000);

    // Очистка интервала при размонтировании компонента
    return () => clearInterval(intervalId);
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default PollingExample;

Объяснение:

  • useEffect используется для выполнения запроса при монтировании компонента.
  • setInterval запускает запрос каждые 5 секунд.
  • clearInterval очищает интервал при размонтировании компонента, чтобы избежать утечек памяти.

Преимущества Polling:​

  1. Простота реализации: Не требует сложной настройки сервера.
  2. Совместимость: Работает с любым REST или GraphQL API.
  3. Поддержка старых браузеров: В отличие от WebSockets, polling работает везде.

Недостатки Polling:​

  1. Высокая нагрузка на сервер: Постоянные запросы могут создавать нагрузку.
  2. Задержки: Данные обновляются только через заданный интервал.
  3. Неэффективность: Много запросов могут быть избыточными, если данные не меняются.

Когда использовать Polling:​

  • Когда нужно простое решение для обновления данных.
  • Когда данные изменяются не очень часто.
  • Когда использование WebSockets или SSE невозможно.

Альтернативы Polling:​

  1. WebSockets: Для реального времени с двусторонней связью.
  2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту.
  3. Long Polling: Клиент отправляет запрос и ждет, пока сервер не вернет новые данные.

🚀 Источник: DeepSeek