From ffc36a02051dcacc11b326569166443e23a8df1a Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Tue, 7 Jan 2025 17:33:58 +0100
Subject: [PATCH] pl-fe: Try some optimizations

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 .../src/components/status-action-bar.tsx      |  7 ++++---
 .../src/features/notifications/index.tsx      |  4 ++--
 .../status/components/detailed-status.tsx     |  2 --
 .../src/features/status/components/thread.tsx | 19 ++++++-------------
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx
index 0554dc5c8..b103eb7ab 100644
--- a/packages/pl-fe/src/components/status-action-bar.tsx
+++ b/packages/pl-fe/src/components/status-action-bar.tsx
@@ -566,6 +566,7 @@ const ShareButton: React.FC<Pick<IActionButton, 'status' | 'statusActionButtonTh
 interface IMenuButton extends IActionButton {
   expandable?: boolean;
   fromBookmarks?: boolean;
+  publicStatus: boolean;
 }
 
 const MenuButton: React.FC<IMenuButton> = ({
@@ -574,6 +575,7 @@ const MenuButton: React.FC<IMenuButton> = ({
   me,
   expandable,
   fromBookmarks,
+  publicStatus,
 }) => {
   const intl = useIntl();
   const history = useHistory();
@@ -1027,8 +1029,6 @@ const MenuButton: React.FC<IMenuButton> = ({
     return menu;
   };
 
-  const publicStatus = ['public', 'unlisted', 'group'].includes(status.visibility);
-
   const menu = _makeMenu(publicStatus);
 
   return (
@@ -1077,7 +1077,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     });
   };
 
-  const publicStatus = ['public', 'unlisted', 'group'].includes(status.visibility);
+  const publicStatus = useMemo(() => ['public', 'unlisted', 'group'].includes(status.visibility), [status.visibility]);
 
   const spacing: {
     [key: string]: React.ComponentProps<typeof HStack>['space'];
@@ -1158,6 +1158,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           onOpenUnauthorizedModal={onOpenUnauthorizedModal}
           expandable={expandable}
           fromBookmarks={fromBookmarks}
+          publicStatus={publicStatus}
         />
       </HStack>
     </HStack>
diff --git a/packages/pl-fe/src/features/notifications/index.tsx b/packages/pl-fe/src/features/notifications/index.tsx
index 803ea3c00..d233cf6f5 100644
--- a/packages/pl-fe/src/features/notifications/index.tsx
+++ b/packages/pl-fe/src/features/notifications/index.tsx
@@ -113,8 +113,8 @@ const Notifications = () => {
     dispatch(scrollTopNotifications(true));
 
     return () => {
-      handleLoadOlder.cancel();
-      handleScroll.cancel();
+      handleLoadOlder.cancel?.();
+      handleScroll.cancel?.();
       dispatch(scrollTopNotifications(false));
     };
   }, []);
diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx
index 5c9b3bb0c..160d2d4e9 100644
--- a/packages/pl-fe/src/features/status/components/detailed-status.tsx
+++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx
@@ -25,14 +25,12 @@ const messages = defineMessages({
 
 interface IDetailedStatus {
   status: SelectedStatus;
-  withMedia?: boolean;
   onOpenCompareHistoryModal: (status: Pick<SelectedStatus, 'id'>) => void;
 }
 
 const DetailedStatus: React.FC<IDetailedStatus> = ({
   status,
   onOpenCompareHistoryModal,
-  withMedia = true,
 }) => {
   const intl = useIntl();
 
diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index 1a2f4e77f..f549774dd 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -302,13 +302,12 @@ const Thread: React.FC<IThread> = ({
     virtualizer.current?.scrollToIndex(ancestorsIds.length);
   }, [status.id, ancestorsIds.length]);
 
-  const handleOpenCompareHistoryModal = (status: Pick<Status, 'id'>) => {
+  const handleOpenCompareHistoryModal = useCallback((status: Pick<Status, 'id'>) => {
     openModal('COMPARE_HISTORY', {
       statusId: status.id,
     });
-  };
+  }, [status.id]);
 
-  const hasAncestors = ancestorsIds.length > 0;
   const hasDescendants = descendantsIds.length > 0;
 
   type HotkeyHandlers = { [key: string]: (keyEvent?: KeyboardEvent) => void };
@@ -342,7 +341,6 @@ const Thread: React.FC<IThread> = ({
 
             <DetailedStatus
               status={status}
-              withMedia={withMedia}
               onOpenCompareHistoryModal={handleOpenCompareHistoryModal}
             />
 
@@ -371,15 +369,10 @@ const Thread: React.FC<IThread> = ({
     children.push(<div key='padding' className='h-4' />);
   }
 
-  if (hasAncestors) {
-    children.push(...renderChildren(ancestorsIds));
-  }
+  const renderedAncestors = useMemo(() => renderChildren(ancestorsIds), [ancestorsIds]);
+  const renderedDescendants = useMemo(() => renderChildren(descendantsIds), [descendantsIds]);
 
-  children.push(focusedStatus);
-
-  if (hasDescendants) {
-    children.push(...renderChildren(descendantsIds));
-  }
+  children.push(...renderedAncestors, focusedStatus, ...renderedDescendants);
 
   return (
     <Stack