1function InfiniteList() {
2  const [items, setItems] = useState([]);
3  const [page, setPage] = useState(1);
4  const [loading, setLoading] = useState(false);
5  const containerRef = useRef(null);
6  
7  const fetchItems = async () => {
8    setLoading(true);
9    const newItems = await api.getItems(page);
10    setItems([...items, ...newItems]);
11    setPage(page + 1);
12    setLoading(false);
13  };
14  
15  useEffect(() => {
16    const observer = new IntersectionObserver(
17      (entries) => {
18        if (entries[0].isIntersecting && !loading) {
19          fetchItems();
20        }
21      },
22      { threshold: 0.1 }
23    );
24    
25    if (containerRef.current) {
26      observer.observe(containerRef.current);
27    }
28    
29    return () => observer.disconnect();
30  }, [loading, page]);
31  
32  return (
33    <div className="list-container">
34      {items.map(item => (
35        <div key={item.id} className="list-item">
36          {item.title}
37        </div>
38      ))}
39      <div ref={containerRef} className="loading-trigger">
40        {loading &amp;&amp; 'Loading more...'}
41      </div>
42    </div>
43  );
44}