Squeeze all the micro-perf

This commit is contained in:
Lim Chee Aun 2024-01-25 21:28:41 +08:00
parent a2d995ec07
commit 5cfcfdc98b
4 changed files with 34 additions and 20 deletions

View file

@ -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,
);

View file

@ -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}

View file

@ -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;
});

View file

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