bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'status-content-perf' into 'develop'

Browse source 
StatusContent: memoization performance enhancements

Closes #1005

See merge request soapbox-pub/soapbox-fe!1570
This commit is contained in:
Alex Gleason 2022-06-25 21:27:26 +00:00
commit 6f231cd49d
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/soapbox/components/status_content.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect, useMemo } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -156,14 +156,10 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
} }
}; };
const refresh = (): void => { useEffect(() => {
maybeSetCollapsed(); maybeSetCollapsed();
maybeSetOnlyEmoji(); maybeSetOnlyEmoji();
updateStatusLinks(); updateStatusLinks();
};
useEffect(() => {
refresh();
}); });
const handleMouseDown: React.EventHandler<React.MouseEvent> = (e) => { const handleMouseDown: React.EventHandler<React.MouseEvent> = (e) => {
@ -201,11 +197,15 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
} }
}; };
const getHtmlContent = (): string => { const parsedHtml = useMemo((): string => {
const { contentHtml: html } = status; const { contentHtml: html } = status;
if (greentext) return addGreentext(html);
return html; if (greentext) {
}; return addGreentext(html);
} else {
return html;
}
}, [status.contentHtml]);
if (status.content.length === 0) { if (status.content.length === 0) {
return null; return null;
@ -213,7 +213,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
const isHidden = onExpandedToggle ? !expanded : hidden; const isHidden = onExpandedToggle ? !expanded : hidden;
const content = { __html: getHtmlContent() }; const content = { __html: parsedHtml };
const spoilerContent = { __html: status.spoilerHtml }; const spoilerContent = { __html: status.spoilerHtml };
const directionStyle: React.CSSProperties = { direction: 'ltr' }; const directionStyle: React.CSSProperties = { direction: 'ltr' };
const className = classNames('status__content', { const className = classNames('status__content', {
@ -303,4 +303,4 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
} }
}; };
export default StatusContent; export default React.memo(StatusContent);