Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 17:16:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

Prevent all the re-renders

Browse source 
Srsly this took me hours to debug
This commit is contained in:
Lim Chee Aun 2023-09-09 17:00:51 +08:00
parent 696a46311d
commit 6b5a98ebb3
2 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/status.jsx
View file

@ -550,7 +550,9 @@ function Status({
</MenuHeader> </MenuHeader>
<MenuLink <MenuLink
to={instance ? `/${instance}/s/${id}` : `/s/${id}`} to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
onClick={onStatusLinkClick} onClick={(e) => {
onStatusLinkClick(e, status);
}}
> >
<Icon icon="arrow-right" /> <Icon icon="arrow-right" />
<span>View post by @{username || acct}</span> <span>View post by @{username || acct}</span>
@ -1038,7 +1040,7 @@ function Status({
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
onStatusLinkClick?.(); onStatusLinkClick?.(e, status);
}} }}
class={`time ${open ? 'is-open' : ''}`} class={`time ${open ? 'is-open' : ''}`}
> >

17
src/pages/status.jsx
View file

@ -48,9 +48,10 @@ const MAX_WEIGHT = 5;
let cachedRepliesToggle = {}; let cachedRepliesToggle = {};
let cachedStatusesMap = {}; let cachedStatusesMap = {};
let scrollPositions = {};
function resetScrollPosition(id) { function resetScrollPosition(id) {
delete cachedStatusesMap[id]; delete cachedStatusesMap[id];
delete states.scrollPositions[id]; delete scrollPositions[id];
} }
function StatusPage(params) { function StatusPage(params) {
@ -184,7 +185,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
if (!scrollableRef.current) return; if (!scrollableRef.current) return;
const { scrollTop } = scrollableRef.current; const { scrollTop } = scrollableRef.current;
if (uiState !== 'loading') { if (uiState !== 'loading') {
states.scrollPositions[id] = scrollTop; scrollPositions[id] = scrollTop;
} }
}, 50); }, 50);
scrollableRef.current?.addEventListener('scroll', onScroll, { scrollableRef.current?.addEventListener('scroll', onScroll, {
@ -391,7 +392,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
useEffect(() => { useEffect(() => {
if (!statuses.length) return; if (!statuses.length) return;
console.debug('STATUSES', statuses); console.debug('STATUSES', statuses);
const scrollPosition = snapStates.scrollPositions[id]; const scrollPosition = scrollPositions[id];
console.debug('scrollPosition', scrollPosition); console.debug('scrollPosition', scrollPosition);
if (!!scrollPosition) { if (!!scrollPosition) {
console.debug('Case 1', { console.debug('Case 1', {
@ -449,7 +450,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
useEffect(() => { useEffect(() => {
return () => { return () => {
// RESET // RESET
states.scrollPositions = {}; scrollPositions = {};
states.reloadStatusPage = 0; states.reloadStatusPage = 0;
cachedStatusesMap = {}; cachedStatusesMap = {};
cachedRepliesToggle = {}; cachedRepliesToggle = {};
@ -633,6 +634,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
[id], [id],
); );
const handleStatusLinkClick = useCallback((e, status) => {
resetScrollPosition(status.id);
}, []);
return ( return (
<div <div
tabIndex="-1" tabIndex="-1"
@ -979,9 +984,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
size={thread || ancestor ? 'm' : 's'} size={thread || ancestor ? 'm' : 's'}
enableTranslate enableTranslate
onMediaClick={handleMediaClick} onMediaClick={handleMediaClick}
onStatusLinkClick={() => { onStatusLinkClick={handleStatusLinkClick}
resetScrollPosition(statusID);
}}
/> />
{ancestor && isThread && repliesCount > 1 && ( {ancestor && isThread && repliesCount > 1 && (
<div class="replies-link"> <div class="replies-link">