useInterval example

ShoppingList.tsx

import React, { useState, useCallback } from 'react';
import useInterval from './useInterval';

const ShoppingList = () => {
  // Wait 5 seconds before fetching new data
  const POLL_DELAY = 5000;
  const [items, setItems] = useState([]);

  const fetchItems = useCallback(async () => {
    const response = await fetch('/shopping-list/items');
    const json = await response.json();
    setItems(json);
  }, []);

  useEffect(() => {
    // Fetch items from API on mount
    fetchItems();
  }, []);

  useInterval(() => {
    fetchItems();
  }, POLL_DELAY);

  return (
    <ul>
      {items.map((item) => <li>{item.title}</li>)}
    </ul>
  )
};