pl-fe: optimizations?

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

packages/pl-fe/src/components/loading-screen.tsx

@@ -4,7 +4,7 @@ import LandingGradient from 'pl-fe/components/landing-gradient';
 import Spinner from 'pl-fe/components/ui/spinner';
 
 /** Fullscreen loading indicator. */
-const LoadingScreen: React.FC = () => (
+const LoadingScreen: React.FC = React.memo(() => (
   <div className='fixed h-screen w-screen'>
     <LandingGradient />
 
@@ -14,6 +14,6 @@ const LoadingScreen: React.FC = () => (
       </div>
     </div>
   </div>
-);
+));
 
 export { LoadingScreen as default };

packages/pl-fe/src/components/search-input.tsx

@@ -25,7 +25,7 @@ const redirectToAccount = (accountId: string, routerHistory: History) =>
     }
   };
 
-const SearchInput = () => {
+const SearchInput = React.memo(() => {
   const [value, setValue] = useState('');
 
   const dispatch = useAppDispatch();
@@ -110,6 +110,6 @@ const SearchInput = () => {
       </div>
     </div>
   );
-};
+});
 
 export { SearchInput as default };

packages/pl-fe/src/components/sidebar-menu.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -59,7 +59,7 @@ interface ISidebarLink {
   onClick: React.EventHandler<React.MouseEvent>;
 }
 
-const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
+const SidebarLink: React.FC<ISidebarLink> = React.memo(({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
       <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
@@ -83,9 +83,10 @@ const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick })
       {body}
     </a>
   );
-};
+});
 
-const SidebarMenu: React.FC = (): JSX.Element | null => {
+
+const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -493,6 +494,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       </div>
     </div>
   );
-};
+});
 
 export { SidebarMenu as default };

packages/pl-fe/src/components/status-action-bar.tsx

@@ -211,7 +211,6 @@ const ReplyButton: React.FC<IReplyButton> = ({
 
   let replyTitle;
   let replyDisabled = false;
-  const replyCount = status.replies_count;
 
   if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
     replyDisabled = true;
@@ -237,7 +236,7 @@ const ReplyButton: React.FC<IReplyButton> = ({
       title={replyTitle}
       icon={require('@tabler/icons/outline/message-circle.svg')}
       onClick={handleReplyClick}
-      count={replyCount}
+      count={status.replies_count}
       text={withLabels ? intl.formatMessage(messages.reply) : undefined}
       disabled={replyDisabled}
       theme={statusActionButtonTheme}

packages/pl-fe/src/hooks/use-can-interact.ts

@@ -1,32 +1,36 @@
+import { useMemo } from 'react';
+
 import { useAppSelector } from './use-app-selector';
 
 import type { InteractionPolicy, InteractionPolicyEntry } from 'pl-api';
 import type { MinifiedStatus } from 'pl-fe/reducers/statuses';
 
-const useCanInteract = (status: Pick<MinifiedStatus, 'account_id' | 'mentions' | 'interaction_policy'>, type: keyof InteractionPolicy): {
+const useCanInteract = (status: Pick<MinifiedStatus, 'account_id' | 'id' | 'interaction_policy' | 'mentions'>, type: keyof InteractionPolicy): {
   canInteract: boolean;
   approvalRequired: boolean | null;
   allowed?: Array<InteractionPolicyEntry>;
 } => {
-  const interactionPolicy = status.interaction_policy;
-
   const me = useAppSelector(state => state.me);
 
-  if (me === status.account_id || interactionPolicy[type].always.includes('me')) return {
-    canInteract: true,
-    approvalRequired: false,
-  };
+  return useMemo(() => {
+    const interactionPolicy = status.interaction_policy;
 
-  if (interactionPolicy[type].with_approval.includes('me')) return {
-    canInteract: true,
-    approvalRequired: true,
-  };
+    if (me === status.account_id || interactionPolicy[type].always.includes('me')) return {
+      canInteract: true,
+      approvalRequired: false,
+    };
 
-  return {
-    canInteract: false,
-    approvalRequired: null,
-    allowed: [...interactionPolicy[type].always, ...interactionPolicy[type].with_approval],
-  };
+    if (interactionPolicy[type].with_approval.includes('me')) return {
+      canInteract: true,
+      approvalRequired: true,
+    };
+
+    return {
+      canInteract: false,
+      approvalRequired: null,
+      allowed: [...interactionPolicy[type].always, ...interactionPolicy[type].with_approval],
+    };
+  }, [me, status.id, type]);
 };
 
 export { useCanInteract };