pl-fe: Try some optimizations

Signed-off-by: mkljczk <git@mkljczk.pl>

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>

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));
     };
   }, []);

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();
 

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