this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix unneccesary re-renders in Notifications

+25 -22
+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
··· 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
··· 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,