Fix unneccesary re-renders in Notifications

src/components/notification.jsx

@@ -1,3 +1,5 @@
+import { memo } from 'preact/compat';
+
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import store from '../utils/store';
@@ -64,7 +66,7 @@ const contentText = {
 
 const AVATARS_LIMIT = 50;
 
-function Notification({ notification, instance, reload, isStatic }) {
+function Notification({ notification, instance, isStatic }) {
   const { id, status, account, report, _accounts, _statuses } = notification;
   let { type } = notification;
 
@@ -153,8 +155,14 @@ function Notification({ notification, instance, reload, isStatic }) {
     };
   };
 
+  console.debug('RENDER Notification', notification.id);
+
   return (
-    <div class={`notification notification-${type}`} tabIndex="0">
+    <div
+      class={`notification notification-${type}`}
+      data-notification-id={id}
+      tabIndex="0"
+    >
       <div
         class={`notification-type notification-${type}`}
         title={formattedCreatedAt}
@@ -207,12 +215,7 @@ function Notification({ notification, instance, reload, isStatic }) {
               )}
             </p>
             {type === 'follow_request' && (
-              <FollowRequestButtons
-                accountID={account.id}
-                onChange={() => {
-                  // reload();
-                }}
-              />
+              <FollowRequestButtons accountID={account.id} />
             )}
           </>
         )}
@@ -327,4 +330,4 @@ function TruncatedLink(props) {
   return <Link {...props} data-read-more="Read more →" ref={ref} />;
 }
 
-export default Notification;
+export default memo(Notification);

src/pages/notifications.jsx

@@ -1,5 +1,6 @@
 import './notifications.css';
 
+import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
@@ -166,11 +167,11 @@ function Notifications({ columnMode }) {
     }
   }, [reachStart]);
 
-  useEffect(() => {
-    if (nearReachEnd && showMore) {
-      loadNotifications();
-    }
-  }, [nearReachEnd, showMore]);
+  // useEffect(() => {
+  //   if (nearReachEnd && showMore) {
+  //     loadNotifications();
+  //   }
+  // }, [nearReachEnd, showMore]);
 
   const loadUpdates = useCallback(() => {
     console.log('✨ Load updates', {
@@ -409,18 +410,14 @@ function Notifications({ columnMode }) {
                         hideTime: true,
                       });
                 return (
-                  <>
+                  <Fragment key={notification.id}>
                     {differentDay && <h2 class="timeline-header">{heading}</h2>}
                     <Notification
                       instance={instance}
                       notification={notification}
                       key={notification.id}
-                      reload={() => {
-                        loadNotifications(true);
-                        loadFollowRequests();
-                      }}
                     />
-                  </>
+                  </Fragment>
                 );
               })}
           </>

src/utils/group-notifications.jsx

@@ -6,7 +6,7 @@ function groupNotifications(notifications) {
   const cleanNotifications = [];
   for (let i = 0, j = 0; i < notifications.length; i++) {
     const notification = notifications[i];
-    const { status, account, type, createdAt } = notification;
+    const { id, status, account, type, createdAt } = notification;
     const date = new Date(createdAt).toLocaleDateString();
     let virtualType = type;
     if (type === 'favourite' || type === 'reblog') {
@@ -23,9 +23,11 @@ function groupNotifications(notifications) {
       if (mappedAccount) {
         mappedAccount._types.push(type);
         mappedAccount._types.sort().reverse();
+        mappedNotification.id += `-${id}`;
       } else {
         account._types = [type];
         mappedNotification._accounts.push(account);
+        mappedNotification.id += `-${id}`;
       }
     } else {
       account._types = [type];
@@ -47,13 +49,14 @@ function groupNotifications(notifications) {
   const cleanNotifications2 = [];
   for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
     const notification = cleanNotifications[i];
-    const { account, _accounts, type, createdAt } = notification;
+    const { id, account, _accounts, type, createdAt } = notification;
     const date = new Date(createdAt).toLocaleDateString();
     if (type === 'favourite+reblog' && account && _accounts.length === 1) {
       const key = `${account?.id}-${type}-${date}`;
       const mappedNotification = notificationsMap2[key];
       if (mappedNotification) {
         mappedNotification._statuses.push(notification.status);
+        mappedNotification.id += `-${id}`;
       } else {
         let n = (notificationsMap2[key] = {
           ...notification,