Clear read notifications from the panel
React · React · intermediate · modification
Reworks the "Clear read" action. Instead of rebuilding the list with filter, it copies the current notifications into a local `remaining` array (so we never touch state in place) and prunes the read ones out of that copy in a single linear pass before calling setNotifications. Same result, and the copy keeps the update immutable.
Opening the panel marks the notifications currently on screen as read, so read notifications usually arrive in contiguous runs — it's normal for several read entries to sit right next to each other when the user taps "Clear read".
Requirements
- clearRead() removes every notification whose `read` flag is true.
- Notifications that are still unread must remain, in their original order.
- State updates must stay immutable: do not mutate the array stored in `notifications` — hand setNotifications a new array.
Files touched
- src/components/NotificationList.jsx
--- src/components/NotificationList.jsx
function clearRead() {
- setNotifications(
- notifications.filter((notification) => !notification.read)
- );
+ const remaining = [...notifications];
+ remaining.forEach((notification, i) => {
+ if (notification.read) {
+ remaining.splice(i, 1);
+ }
+ });
+ setNotifications(remaining);
}