From 5cfcfdc98bb86be1da156e8de525f1d446078895 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 25 Jan 2024 21:28:41 +0800
Subject: [PATCH] Squeeze all the micro-perf

---
 src/components/emoji-text.jsx    |  9 ++++++++-
 src/components/icon.jsx          |  7 +++----
 src/components/name-text.jsx     |  7 ++++++-
 src/components/relative-time.jsx | 31 +++++++++++++++++--------------
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/emoji-text.jsx b/src/components/emoji-text.jsx
index e32e73d..752a745 100644
--- a/src/components/emoji-text.jsx
+++ b/src/components/emoji-text.jsx
@@ -1,3 +1,5 @@
+import { memo } from 'preact/compat';
+
 function EmojiText({ text, emojis }) {
   if (!text) return '';
   if (!emojis?.length) return text;
@@ -31,4 +33,9 @@ function EmojiText({ text, emojis }) {
   return elements;
 }
 
-export default EmojiText;
+export default memo(
+  EmojiText,
+  (oldProps, newProps) =>
+    oldProps.text === newProps.text &&
+    oldProps.emojis?.length === newProps.emojis?.length,
+);
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 47fbc7b..df1e0c8 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -15,11 +15,9 @@ const ICONDATA = {};
 
 // Memoize the dangerouslySetInnerHTML of the SVGs
 const SVGICon = moize(
-  function ({ size, width, height, body, rotate, flip }) {
+  function ({ width, height, body, rotate, flip }) {
     return (
       <svg
-        // width={size}
-        // height={size}
         viewBox={`0 0 ${width} ${height}`}
         dangerouslySetInnerHTML={{ __html: body }}
         style={{
@@ -33,6 +31,7 @@ const SVGICon = moize(
   {
     isShallowEqual: true,
     maxSize: Object.keys(ICONS).length,
+    matchesArg: (cacheKeyArg, keyArg) => cacheKeyArg.icon === keyArg.icon,
   },
 );
 
@@ -93,7 +92,7 @@ function Icon({
         //   }}
         // />
         <SVGICon
-          size={iconSize}
+          icon={icon}
           width={iconData.width}
           height={iconData.height}
           body={iconData.body}
diff --git a/src/components/name-text.jsx b/src/components/name-text.jsx
index a22b9f1..f807d63 100644
--- a/src/components/name-text.jsx
+++ b/src/components/name-text.jsx
@@ -97,4 +97,9 @@ function NameText({
   );
 }
 
-export default memo(NameText);
+export default memo(NameText, (oldProps, newProps) => {
+  // Only care about account.id, the other props usually don't change
+  const { account } = oldProps;
+  const { account: newAccount } = newProps;
+  return account?.acct === newAccount?.acct;
+});
diff --git a/src/components/relative-time.jsx b/src/components/relative-time.jsx
index 37e8156..ce402cb 100644
--- a/src/components/relative-time.jsx
+++ b/src/components/relative-time.jsx
@@ -8,6 +8,7 @@ import dayjs from 'dayjs';
 import dayjsTwitter from 'dayjs-twitter';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useMemo } from 'preact/hooks';
 
 dayjs.extend(dayjsTwitter);
 dayjs.extend(localizedFormat);
@@ -17,23 +18,25 @@ const dtf = new Intl.DateTimeFormat();
 
 export default function RelativeTime({ datetime, format }) {
   if (!datetime) return null;
-  const date = dayjs(datetime);
-  let dateStr;
-  if (format === 'micro') {
-    // If date <= 1 day ago or day is within this year
-    const now = dayjs();
-    const dayDiff = now.diff(date, 'day');
-    if (dayDiff <= 1 || now.year() === date.year()) {
-      dateStr = date.twitter();
-    } else {
-      dateStr = dtf.format(date.toDate());
+  const date = useMemo(() => dayjs(datetime), [datetime]);
+  const dateStr = useMemo(() => {
+    if (format === 'micro') {
+      // If date <= 1 day ago or day is within this year
+      const now = dayjs();
+      const dayDiff = now.diff(date, 'day');
+      if (dayDiff <= 1 || now.year() === date.year()) {
+        return date.twitter();
+      } else {
+        return dtf.format(date.toDate());
+      }
     }
-  } else {
-    dateStr = date.fromNow();
-  }
+    return date.fromNow();
+  }, [date, format]);
+  const dt = useMemo(() => date.toISOString(), [date]);
+  const title = useMemo(() => date.format('LLLL'), [date]);
 
   return (
-    <time datetime={date.toISOString()} title={date.format('LLLL')}>
+    <time datetime={dt} title={title}>
       {dateStr}
     </time>
   );