Optimize alert and pool health selectors

src-gui/src/renderer/components/pages/help/MoneroPoolHealthBox.tsx

@@ -17,10 +17,8 @@ import NetworkWifiIcon from "@mui/icons-material/NetworkWifi";
 import { useAppSelector } from "store/hooks";
 
 export default function MoneroPoolHealthBox() {
-  const { poolStatus, isLoading } = useAppSelector((state) => ({
-    poolStatus: state.pool.status,
-    isLoading: state.pool.isLoading,
-  }));
+  const poolStatus = useAppSelector((state) => state.pool.status);
+  const isLoading = useAppSelector((state) => state.pool.isLoading);
   const theme = useTheme();
 
   const formatLatency = (latencyMs?: number) => {

src-gui/src/store/hooks.ts

@@ -32,12 +32,12 @@ import {
   TauriBitcoinSyncProgress,
 } from "models/tauriModel";
 import { Alert } from "models/apiModel";
-import { fnv1a } from "utils/hash";
 import {
   selectAllSwapInfos,
   selectPendingApprovals,
   selectSwapInfoWithTimelock,
   selectSwapInfosRaw,
+  selectUnacknowledgedAlerts,
 } from "./selectors";
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
@@ -339,16 +339,7 @@ export function useTotalUnreadMessagesCount(): number {
 
 /// Returns all the alerts that have not been acknowledged
 export function useAlerts(): Alert[] {
-  return useAppSelector((state) =>
-    state.alerts.alerts.filter(
-      (alert) =>
-        // Check if there is an acknowledgement with
-        // the same id and the same title hash
-        !state.alerts.acknowledgedAlerts.some(
-          (ack) => ack.id === alert.id && ack.titleHash === fnv1a(alert.title),
-        ),
-    ),
-  );
+  return useAppSelector(selectUnacknowledgedAlerts);
 }
 
 /// Returns true if the we heuristically determine that the user has used the app at least a little bit

src-gui/src/store/selectors.ts

@@ -6,9 +6,13 @@ import {
   ExpiredTimelocks,
   QuoteStatus,
 } from "models/tauriModel";
+import { fnv1a } from "utils/hash";
 
 const selectRpcState = (state: RootState) => state.rpc.state;
 const selectP2pState = (state: RootState) => state.p2p;
+const selectAlerts = (state: RootState) => state.alerts.alerts;
+const selectAcknowledgedAlerts = (state: RootState) =>
+  state.alerts.acknowledgedAlerts;
 
 export const selectSwapInfosRaw = createSelector(
   [selectRpcState],
@@ -60,6 +64,17 @@ export const selectPendingApprovals = createSelector(
     ),
 );
 
+export const selectUnacknowledgedAlerts = createSelector(
+  [selectAlerts, selectAcknowledgedAlerts],
+  (alerts, acknowledgedAlerts) =>
+    alerts.filter(
+      (alert) =>
+        !acknowledgedAlerts.some(
+          (ack) => ack.id === alert.id && ack.titleHash === fnv1a(alert.title),
+        ),
+    ),
+);
+
 // TODO: This should be split into multiple selectors/hooks to avoid excessive re-rendering
 export const selectPeers = createSelector([selectP2pState], (p2p) => {
   const peerIds = new Set([