feat: implement safe state management for notification hooks (MetaMask#40401)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Root cause: whenever any team performs async local state updates and the
component unmounts, you will receive this react error (this does
eventually get cleaned up and isn't a breaking error).

E.g.

1. Component Mounts
2. Component calls an async function which once finished will update its
local state (useState)
3. Component unmounts
4. Async function finished, and tries calling setState (but component
was unmounted!) -- react error is logged (not breaking and eventually
cleaned).

This update introduces a new `useSafeState` hook to manage state updates
safely while components are mounted, preventing potential memory leaks
and reduced the opportunity for `React: State updates on unmounted
components` errors.

The `useListNotifications`, `useCreateNotifications`,
`useEnableNotifications`, and `useDisableNotifications` hooks have been
refactored to utilize `useSafeState` for loading, error, and
notifications data states. This change enhances the stability and
reliability of notifications handling in the application.

If this hook is useful, we can move this for other teams to use.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/40401?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: feat: implement safe state management for notification
hooks

## **Related issues**

Fixes: https://consensys.slack.com/archives/CTQAGKY5V/p1771942084169109
https://github.com/MetaMask/metamask-extension/actions/runs/22353733972/job/64687641620?pr=40327

## **Manual testing steps**


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Small, localized React hook change that only affects how async
notification actions update local state; minimal behavioral impact
beyond preventing post-unmount state updates.
> 
> **Overview**
> Adds an internal `useSafeState` hook in `useNotifications.ts` that
gates `setState` calls behind a mounted check to avoid React
warnings/memory leaks when async work completes after unmount.
> 
> Refactors `useListNotifications`, `useCreateNotifications`,
`useEnableNotifications`, and `useDisableNotifications` to use
`useSafeState` for `loading`/`error`/`notificationsData`, and updates
`useCallback` dependency arrays accordingly.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2b153c2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Prithpal-Sooriya

ui/hooks/metamask-notifications/useNotifications.ts

@@ -1,4 +1,11 @@
-import { useState, useCallback } from 'react';
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
 import { useDispatch } from 'react-redux';
 import type { InternalAccount } from '@metamask/keyring-internal-api';
 import log from 'loglevel';
@@ -18,6 +25,34 @@ import {
   updateNotificationSubscriptionExpiration,
 } from '../../contexts/metamask-notifications/notification-storage-keys';
 
+/**
+ * Internal: useState that only applies updates while mounted. Prevents
+ * "state updates on unmounted components" when async work completes after unmount.
+ *
+ * @param initialValue - The initial value of the state.
+ */
+function useSafeState<TValue>(
+  initialValue: TValue,
+): [TValue, Dispatch<SetStateAction<TValue>>] {
+  const [state, setState] = useState<TValue>(initialValue);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const setSafeState = useCallback((value: SetStateAction<TValue>) => {
+    if (isMountedRef.current) {
+      setState(value);
+    }
+  }, []);
+
+  return [state, setSafeState];
+}
+
 // Define KeyringType interface
 type KeyringType = {
   type: string;
@@ -44,9 +79,9 @@ export function useListNotifications(): {
 } {
   const dispatch = useDispatch();
 
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<unknown>(null);
-  const [notificationsData, setNotificationsData] = useState<
+  const [loading, setLoading] = useSafeState<boolean>(false);
+  const [error, setError] = useSafeState<unknown>(null);
+  const [notificationsData, setNotificationsData] = useSafeState<
     INotification[] | undefined
   >(undefined);
 
@@ -72,7 +107,7 @@ export function useListNotifications(): {
     } finally {
       setLoading(false);
     }
-  }, [dispatch]);
+  }, [dispatch, setLoading, setError, setNotificationsData]);
 
   return {
     listNotifications,
@@ -93,7 +128,7 @@ export function useCreateNotifications(): {
   error: string | null;
 } {
   const dispatch = useDispatch();
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useSafeState<string | null>(null);
 
   const createNotifications = useCallback(async () => {
     setError(null);
@@ -106,7 +141,7 @@ export function useCreateNotifications(): {
       log.error(e);
       throw e;
     }
-  }, [dispatch]);
+  }, [dispatch, setError]);
 
   return {
     createNotifications,
@@ -130,7 +165,7 @@ export function useEnableNotifications(): {
 } {
   const dispatch = useDispatch();
 
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useSafeState<string | null>(null);
 
   const enableNotifications = useCallback(async () => {
     setError(null);
@@ -143,7 +178,7 @@ export function useEnableNotifications(): {
       log.error(e);
       throw e;
     }
-  }, [dispatch]);
+  }, [dispatch, setError]);
 
   return {
     enableNotifications,
@@ -162,8 +197,7 @@ export function useDisableNotifications(): {
   error: string | null;
 } {
   const dispatch = useDispatch();
-
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useSafeState<string | null>(null);
 
   const disableNotifications = useCallback(async () => {
     setError(null);
@@ -176,7 +210,7 @@ export function useDisableNotifications(): {
       log.error(e);
       throw e;
     }
-  }, [dispatch]);
+  }, [dispatch, setError]);
 
   return {
     disableNotifications,