Debug Memory Leaks and Bottlenecks

Mercari's marketplace app has an infinite-scroll listing feed: as a shopper searches and scrolls, new product cards load in and live prices update over a WebSocket. QA reported the tab's memory climbing steadily the longer someone browses, and the feed feeling laggier after switching search terms a few times. Here is the component.

function ListingFeed({ searchQuery }) {
  const [listings, setListings] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/listings?q=${searchQuery}`)
      .then((res) => res.json())
      .then((data) => {
        setListings(data.results);
        setLoading(false);
      });

    const priceSocket = new WebSocket('wss://mercari.example.com/price-updates');
    priceSocket.onmessage = (event) => {
      const update = JSON.parse(event.data);
      const updated = listings.map((item) =>
        item.id === update.id ? { ...item, price: update.price } : item
      );
      setListings(updated);
    };

    const scrollHandler = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
        loadMoreListings(searchQuery);
      }
    };
    window.addEventListener('scroll', scrollHandler);
  }, [searchQuery]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {listings.map((item, index) => (
        <ListingCard key={index} item={item} />
      ))}
    </div>
  );
}

Walk through what is leaking memory and what is causing the rendering bottleneck, and explain what you would change and why.