Fix unneccesary re-renders in Notifications

This commit is contained in:
Lim Chee Aun 2023-10-23 16:24:30 +08:00
parent 4897847601
commit 61756fac1d
3 changed files with 25 additions and 22 deletions

View file

@ -1,3 +1,5 @@
import { memo } from 'preact/compat';
import shortenNumber from '../utils/shorten-number';
import states from '../utils/states';
import store from '../utils/store';
@ -64,7 +66,7 @@ const contentText = {
const AVATARS_LIMIT = 50;
function Notification({ notification, instance, reload, isStatic }) {
function Notification({ notification, instance, isStatic }) {
const { id, status, account, report, _accounts, _statuses } = notification;
let { type } = notification;
@ -153,8 +155,14 @@ function Notification({ notification, instance, reload, isStatic }) {
};
};
console.debug('RENDER Notification', notification.id);
return (
<div class={`notification notification-${type}`} tabIndex="0">
<div
class={`notification notification-${type}`}
data-notification-id={id}
tabIndex="0"
>
<div
class={`notification-type notification-${type}`}
title={formattedCreatedAt}
@ -207,12 +215,7 @@ function Notification({ notification, instance, reload, isStatic }) {
)}
</p>
{type === 'follow_request' && (
<FollowRequestButtons
accountID={account.id}
onChange={() => {
// reload();
}}
/>
<FollowRequestButtons accountID={account.id} />
)}
</>
)}
@ -327,4 +330,4 @@ function TruncatedLink(props) {
return <Link {...props} data-read-more="Read more →" ref={ref} />;
}
export default Notification;
export default memo(Notification);

View file

@ -1,5 +1,6 @@
import './notifications.css';
import { Fragment } from 'preact';
import { memo } from 'preact/compat';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { InView } from 'react-intersection-observer';
@ -166,11 +167,11 @@ function Notifications({ columnMode }) {
}
}, [reachStart]);
useEffect(() => {
if (nearReachEnd && showMore) {
loadNotifications();
}
}, [nearReachEnd, showMore]);
// useEffect(() => {
// if (nearReachEnd && showMore) {
// loadNotifications();
// }
// }, [nearReachEnd, showMore]);
const loadUpdates = useCallback(() => {
console.log('✨ Load updates', {
@ -409,18 +410,14 @@ function Notifications({ columnMode }) {
hideTime: true,
});
return (
<>
<Fragment key={notification.id}>
{differentDay && <h2 class="timeline-header">{heading}</h2>}
<Notification
instance={instance}
notification={notification}
key={notification.id}
reload={() => {
loadNotifications(true);
loadFollowRequests();
}}
/>
</>
</Fragment>
);
})}
</>

View file

@ -6,7 +6,7 @@ function groupNotifications(notifications) {
const cleanNotifications = [];
for (let i = 0, j = 0; i < notifications.length; i++) {
const notification = notifications[i];
const { status, account, type, createdAt } = notification;
const { id, status, account, type, createdAt } = notification;
const date = new Date(createdAt).toLocaleDateString();
let virtualType = type;
if (type === 'favourite' || type === 'reblog') {
@ -23,9 +23,11 @@ function groupNotifications(notifications) {
if (mappedAccount) {
mappedAccount._types.push(type);
mappedAccount._types.sort().reverse();
mappedNotification.id += `-${id}`;
} else {
account._types = [type];
mappedNotification._accounts.push(account);
mappedNotification.id += `-${id}`;
}
} else {
account._types = [type];
@ -47,13 +49,14 @@ function groupNotifications(notifications) {
const cleanNotifications2 = [];
for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
const notification = cleanNotifications[i];
const { account, _accounts, type, createdAt } = notification;
const { id, account, _accounts, type, createdAt } = notification;
const date = new Date(createdAt).toLocaleDateString();
if (type === 'favourite+reblog' && account && _accounts.length === 1) {
const key = `${account?.id}-${type}-${date}`;
const mappedNotification = notificationsMap2[key];
if (mappedNotification) {
mappedNotification._statuses.push(notification.status);
mappedNotification.id += `-${id}`;
} else {
let n = (notificationsMap2[key] = {
...notification,