More memoization

src/components/timeline.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'preact/compat';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
@@ -243,9 +244,9 @@ function Timeline({
     ({
       scrollDirection,
       nearReachStart,
-      nearReachEnd,
+      // nearReachEnd,
       reachStart,
-      reachEnd,
+      // reachEnd,
     }) => {
       // setHiddenUI(scrollDirection === 'end' && !nearReachEnd);
       if (headerRef.current) {
@@ -516,7 +517,8 @@ function Timeline({
   );
 }
 
-function TimelineItem({
+const TimelineItem = memo(
+  ({
     status,
     instance,
     useItemID,
@@ -525,7 +527,8 @@ function TimelineItem({
     view,
     showFollowedTags,
     showReplyParent,
-}) {
+  }) => {
+    console.debug('RENDER TimelineItem', status.id);
     const { id: statusID, reblog, items, type, _pinned } = status;
     if (_pinned) useItemID = false;
     const actualStatusID = reblog?.id || statusID;
@@ -572,7 +575,10 @@ function TimelineItem({
                 if (_pinned) useItemID = false;
                 return (
                   <li key={statusID}>
-                  <Link class="status-carousel-link timeline-item-alt" to={url}>
+                    <Link
+                      class="status-carousel-link timeline-item-alt"
+                      to={url}
+                    >
                       {useItemID ? (
                         <Status
                           statusID={statusID}
@@ -699,7 +705,17 @@ function TimelineItem({
         </Link>
       </li>
     );
-}
+  },
+  (oldProps, newProps) => {
+    const oldID = (oldProps.status?.id || '').toString();
+    const newID = (newProps.status?.id || '').toString();
+    return (
+      oldID === newID &&
+      oldProps.instance === newProps.instance &&
+      oldProps.view === newProps.view
+    );
+  },
+);
 
 function StatusCarousel({ title, class: className, children }) {
   const carouselRef = useRef();