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

17
src/pages/status.jsx
View file

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