useEffect & api pooling

api_pooling_better.js

import { useState, useEffect } from 'react';

const usePolling = (url, interval = 5000) => {
  const [data, setData] = useState(null);
  const [isFetching, setIsFetching] = useState(true);

  useEffect(() => {
    let isMounted = true;
    let timerId;

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        if (isMounted) setData(result);
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        if (isMounted) {
          timerId = setTimeout(fetchData, interval);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
      clearTimeout(timerId);
    };
  }, [url, interval]);

  return { data, isFetching };
};

export default usePolling;

api_pooling_naive.js

useEffect(() => {
  setInterval(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, 5000);
}, []);