simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More memoization

Browse source
This commit is contained in:
Lim Chee Aun 2024-02-14 17:17:15 +08:00
parent 3295b1ab96
commit c84ad73d0d
1 changed files with 197 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/timeline.jsx
View file

@ -1,3 +1,4 @@
import { memo } from 'preact/compat';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { InView } from 'react-intersection-observer'; import { InView } from 'react-intersection-observer';
@ -243,9 +244,9 @@ function Timeline({
({ ({
scrollDirection, scrollDirection,
nearReachStart, nearReachStart,
nearReachEnd, // nearReachEnd,
reachStart, reachStart,
reachEnd, // reachEnd,
}) => { }) => {
// setHiddenUI(scrollDirection === 'end' && !nearReachEnd); // setHiddenUI(scrollDirection === 'end' && !nearReachEnd);
if (headerRef.current) { if (headerRef.current) {
@ -516,7 +517,8 @@ function Timeline({
); );
} }
function TimelineItem({ const TimelineItem = memo(
({
status, status,
instance, instance,
useItemID, useItemID,
@ -525,7 +527,8 @@ function TimelineItem({
view, view,
showFollowedTags, showFollowedTags,
showReplyParent, showReplyParent,
}) { }) => {
console.debug('RENDER TimelineItem', status.id);
const { id: statusID, reblog, items, type, _pinned } = status; const { id: statusID, reblog, items, type, _pinned } = status;
if (_pinned) useItemID = false; if (_pinned) useItemID = false;
const actualStatusID = reblog?.id || statusID; const actualStatusID = reblog?.id || statusID;
@ -572,7 +575,10 @@ function TimelineItem({
if (_pinned) useItemID = false; if (_pinned) useItemID = false;
return ( return (
<li key={statusID}> <li key={statusID}>
<Link class="status-carousel-link timeline-item-alt" to={url}> <Link
class="status-carousel-link timeline-item-alt"
to={url}
>
{useItemID ? ( {useItemID ? (
<Status <Status
statusID={statusID} statusID={statusID}
@ -699,7 +705,17 @@ function TimelineItem({
</Link> </Link>
</li> </li>
); );
} },
(oldProps, newProps) => {
const oldID = (oldProps.status?.id || '').toString();
const newID = (newProps.status?.id || '').toString();
return (
oldID === newID &&
oldProps.instance === newProps.instance &&
oldProps.view === newProps.view
);
},
);
function StatusCarousel({ title, class: className, children }) { function StatusCarousel({ title, class: className, children }) {
const carouselRef = useRef(); const carouselRef = useRef();