From 304ce5a3e80dfe2269e18d13cc96e3185c37185b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 15 Apr 2024 17:06:44 +0800
Subject: [PATCH] Experiment dynamic change of parent
This might prevent double renders
---
src/components/status.jsx | 60 ++++++++++++++++++---------------------
1 file changed, 27 insertions(+), 33 deletions(-)
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 455cd4eb..0d42e609 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -11,6 +11,7 @@ import {
import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
import { shallowEqual } from 'fast-equals';
import prettify from 'html-prettify';
+import { Fragment } from 'preact';
import { memo } from 'preact/compat';
import {
useCallback,
@@ -406,38 +407,31 @@ function Status({
}
// Check followedTags
- if (showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length) {
- return (
- <div
- data-state-post-id={sKey}
- class="status-followed-tags"
- onMouseEnter={debugHover}
- >
- <div class="status-pre-meta">
- <Icon icon="hashtag" size="l" />{' '}
- {snapStates.statusFollowedTags[sKey].slice(0, 3).map((tag) => (
- <Link
- key={tag}
- to={instance ? `/${instance}/t/${tag}` : `/t/${tag}`}
- class="status-followed-tag-item"
- >
- {tag}
- </Link>
- ))}
- </div>
- <Status
- status={statusID ? null : status}
- statusID={statusID ? status.id : null}
- instance={instance}
- size={size}
- contentTextWeight={contentTextWeight}
- readOnly={readOnly}
- enableCommentHint
- mediaFirst={mediaFirst}
- />
+ const FollowedTagsParent = ({ children }) => (
+ <div
+ data-state-post-id={sKey}
+ class="status-followed-tags"
+ onMouseEnter={debugHover}
+ >
+ <div class="status-pre-meta">
+ <Icon icon="hashtag" size="l" />{' '}
+ {snapStates.statusFollowedTags[sKey].slice(0, 3).map((tag) => (
+ <Link
+ key={tag}
+ to={instance ? `/${instance}/t/${tag}` : `/t/${tag}`}
+ class="status-followed-tag-item"
+ >
+ {tag}
+ </Link>
+ ))}
</div>
- );
- }
+ {children}
+ </div>
+ );
+ const StatusParent =
+ showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length
+ ? FollowedTagsParent
+ : Fragment;
const isSizeLarge = size === 'l';
@@ -1383,7 +1377,7 @@ function Status({
]);
return (
- <>
+ <StatusParent>
{showReplyParent && !!(inReplyToId && inReplyToAccountId) && (
<StatusCompact sKey={sKey} />
)}
@@ -2251,7 +2245,7 @@ function Status({
</Modal>
)}
</article>
- </>
+ </StatusParent>
);
}