this repo has no description
Fix unneccesary re-renders in Notifications
+25
-22
+12
-9
src/components/notification.jsx
+12
-9
src/components/notification.jsx
···
1
+
import { memo } from 'preact/compat';
2
+
1
3
import shortenNumber from '../utils/shorten-number';
2
4
import states from '../utils/states';
3
5
import store from '../utils/store';
···
64
66
65
67
const AVATARS_LIMIT = 50;
66
68
67
-
function Notification({ notification, instance, reload, isStatic }) {
69
+
function Notification({ notification, instance, isStatic }) {
68
70
const { id, status, account, report, _accounts, _statuses } = notification;
69
71
let { type } = notification;
70
72
···
153
155
};
154
156
};
155
157
158
+
console.debug('RENDER Notification', notification.id);
159
+
156
160
return (
157
-
<div class={`notification notification-${type}`} tabIndex="0">
161
+
<div
162
+
class={`notification notification-${type}`}
163
+
data-notification-id={id}
164
+
tabIndex="0"
165
+
>
158
166
<div
159
167
class={`notification-type notification-${type}`}
160
168
title={formattedCreatedAt}
···
207
215
)}
208
216
</p>
209
217
{type === 'follow_request' && (
210
-
<FollowRequestButtons
211
-
accountID={account.id}
212
-
onChange={() => {
213
-
// reload();
214
-
}}
215
-
/>
218
+
<FollowRequestButtons accountID={account.id} />
216
219
)}
217
220
</>
218
221
)}
···
327
330
return <Link {...props} data-read-more="Read more →" ref={ref} />;
328
331
}
329
332
330
-
export default Notification;
333
+
export default memo(Notification);
+8
-11
src/pages/notifications.jsx
+8
-11
src/pages/notifications.jsx
···
1
1
import './notifications.css';
2
2
3
+
import { Fragment } from 'preact';
3
4
import { memo } from 'preact/compat';
4
5
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
5
6
import { InView } from 'react-intersection-observer';
···
166
167
}
167
168
}, [reachStart]);
168
169
169
-
useEffect(() => {
170
-
if (nearReachEnd && showMore) {
171
-
loadNotifications();
172
-
}
173
-
}, [nearReachEnd, showMore]);
170
+
// useEffect(() => {
171
+
// if (nearReachEnd && showMore) {
172
+
// loadNotifications();
173
+
// }
174
+
// }, [nearReachEnd, showMore]);
174
175
175
176
const loadUpdates = useCallback(() => {
176
177
console.log('✨ Load updates', {
···
409
410
hideTime: true,
410
411
});
411
412
return (
412
-
<>
413
+
<Fragment key={notification.id}>
413
414
{differentDay && <h2 class="timeline-header">{heading}</h2>}
414
415
<Notification
415
416
instance={instance}
416
417
notification={notification}
417
418
key={notification.id}
418
-
reload={() => {
419
-
loadNotifications(true);
420
-
loadFollowRequests();
421
-
}}
422
419
/>
423
-
</>
420
+
</Fragment>
424
421
);
425
422
})}
426
423
</>
+5
-2
src/utils/group-notifications.jsx
+5
-2
src/utils/group-notifications.jsx
···
6
6
const cleanNotifications = [];
7
7
for (let i = 0, j = 0; i < notifications.length; i++) {
8
8
const notification = notifications[i];
9
-
const { status, account, type, createdAt } = notification;
9
+
const { id, status, account, type, createdAt } = notification;
10
10
const date = new Date(createdAt).toLocaleDateString();
11
11
let virtualType = type;
12
12
if (type === 'favourite' || type === 'reblog') {
···
23
23
if (mappedAccount) {
24
24
mappedAccount._types.push(type);
25
25
mappedAccount._types.sort().reverse();
26
+
mappedNotification.id += `-${id}`;
26
27
} else {
27
28
account._types = [type];
28
29
mappedNotification._accounts.push(account);
30
+
mappedNotification.id += `-${id}`;
29
31
}
30
32
} else {
31
33
account._types = [type];
···
47
49
const cleanNotifications2 = [];
48
50
for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
49
51
const notification = cleanNotifications[i];
50
-
const { account, _accounts, type, createdAt } = notification;
52
+
const { id, account, _accounts, type, createdAt } = notification;
51
53
const date = new Date(createdAt).toLocaleDateString();
52
54
if (type === 'favourite+reblog' && account && _accounts.length === 1) {
53
55
const key = `${account?.id}-${type}-${date}`;
54
56
const mappedNotification = notificationsMap2[key];
55
57
if (mappedNotification) {
56
58
mappedNotification._statuses.push(notification.status);
59
+
mappedNotification.id += `-${id}`;
57
60
} else {
58
61
let n = (notificationsMap2[key] = {
59
62
...notification,