The notifications page currently presents several critical points that affect both user experience and system performance:
1. Multiple Requests and Race Conditions
The hook responsible for fetching notifications can trigger multiple requests in quick succession when the user rapidly switches tabs or scrolls quickly. This can result in out-of-order responses, inconsistent data on the screen, and even API overload.
Suggestion: Implement debounce/throttle on fetches and ensure that only the latest active request is considered, discarding previous ones.
2. Visual Delay for Unseen Notifications
The delay mechanism for highlighting new notifications can cause visual inconsistencies, especially if the user quickly switches tabs or leaves the page before the delay time is up. This can confuse users about what has actually been seen.
Suggestion: Control the delay with local state and ensure timers are cleaned up when the component unmounts to avoid side effects.
3. Rendering Large Lists
The notification filtering is done entirely in memory, which can cause slowness and even freezing on less powerful devices when there is a large volume of notifications.
Suggestion: Use list virtualization (e.g., react-window) to render only visible items, improving performance.
4. Global Hooks and Cascading Re-renders
The use of multiple custom hooks and global providers can cause cascading re-renders, impacting UI smoothness and increasing resource consumption.
Suggestion: Memoize context values and split the main component into smaller, more isolated parts to reduce the impact of global updates.
The notifications page currently presents several critical points that affect both user experience and system performance:
1. Multiple Requests and Race Conditions
The hook responsible for fetching notifications can trigger multiple requests in quick succession when the user rapidly switches tabs or scrolls quickly. This can result in out-of-order responses, inconsistent data on the screen, and even API overload.
Suggestion: Implement debounce/throttle on fetches and ensure that only the latest active request is considered, discarding previous ones.
2. Visual Delay for Unseen Notifications
The delay mechanism for highlighting new notifications can cause visual inconsistencies, especially if the user quickly switches tabs or leaves the page before the delay time is up. This can confuse users about what has actually been seen.
Suggestion: Control the delay with local state and ensure timers are cleaned up when the component unmounts to avoid side effects.
3. Rendering Large Lists
The notification filtering is done entirely in memory, which can cause slowness and even freezing on less powerful devices when there is a large volume of notifications.
Suggestion: Use list virtualization (e.g., react-window) to render only visible items, improving performance.
4. Global Hooks and Cascading Re-renders
The use of multiple custom hooks and global providers can cause cascading re-renders, impacting UI smoothness and increasing resource consumption.
Suggestion: Memoize context values and split the main component into smaller, more isolated parts to reduce the impact of global updates.