Refactor Bookmarks component to use useCallback for bookmark removal and optimize rendering logic

Author: TheCoderAdi

src/pages/Bookmarks.jsx

@@ -1,38 +1,41 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { useGlobalContext } from "../Context";
 
 const Bookmarks = () => {
   const { bookMark, setBookMark } = useGlobalContext();
   const [removingId, setRemovingId] = useState(null);
 
-  if (!bookMark.length) {
-    return (
-      <div style={{ display: "grid", placeItems: "center", height: "100vh" }}>
-        <h1>No Bookmarks Yet! ⭐</h1>
-      </div>
-    );
-  }
-
-  const removeBookmark = (news) => {
-    setRemovingId(news.objectID); 
+  const removeBookmark = useCallback((news) => {
+    setRemovingId(news.objectID);
 
     setTimeout(() => {
       const updatedBookmarks = bookMark.filter(
         (item) => item.objectID !== news.objectID
       );
       setBookMark(updatedBookmarks);
       localStorage.setItem("bookmarks", JSON.stringify(updatedBookmarks));
-    }, 300); 
-  };
+      setRemovingId(null);
+    }, 300);
+  }, [bookMark, setBookMark]);
+
+  if (!bookMark.length) {
+    return (
+      <div style={{ display: "grid", placeItems: "center", height: "100vh" }}>
+        <h1>No Bookmarks Yet! ⭐</h1>
+      </div>
+    );
+  }
 
   return (
     <>
       <div className="stories-div" style={{ paddingTop: "3rem" }}>
         {bookMark.map((curPost) => {
           const { title, author, objectID, url, num_comments } = curPost;
+          const isRemoving = removingId === objectID;
+
           return (
             <div
-              className={`card ${removingId === objectID ? "removing" : ""}`}
+              className={`card ${isRemoving ? "removing" : ""}`}
               key={objectID}
             >
               <h2>{title}</h2>