Rerendering cover images in main page when other states change

[YaleDevUni]

Proposed solution: Instead of using Blob in image src directly, use useEffect for Blob dependency. Example:

  useEffect(() => {
    const fetchBook = async () => {
      const bookId = parseInt(searchParams.get("index") as string, 10);
      const fetchedBook = await db.books.get(bookId);
      setBook(fetchedBook as Book);
      // Create Blob URL once when the book is fetched
      const blobURL = URL.createObjectURL(
        new Blob([fetchedBook?.image as BlobPart], {
          type: "image/webp",
        })
      );
      setImageSrc(blobURL);
    };
    fetchBook();
  }, []);

[YaleDevUni]

Solved using useMemo