feat: implement safe state management for notification hooks#40401
Merged
Prithpal-Sooriya merged 2 commits intomainfrom Feb 26, 2026
Merged
feat: implement safe state management for notification hooks#40401Prithpal-Sooriya merged 2 commits intomainfrom
Prithpal-Sooriya merged 2 commits intomainfrom
Conversation
…s hooks This update introduces a new `useSafeState` hook to manage state updates safely while components are mounted, preventing potential memory leaks. 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.
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
| * | ||
| * @param initialValue - The initial value of the state. | ||
| */ | ||
| function useSafeState<TValue>( |
Contributor
Author
There was a problem hiding this comment.
We can move this out in the future if other teams have similar state updates on unmounted component issues.
Contributor
✨ Files requiring CODEOWNER review ✨🔔 @MetaMask/notifications (1 files, +46 -12)
|
…ate hook This update modifies the `useSafeState` hook to explicitly set `isMountedRef.current` to true upon component mount. This change enhances the reliability of state management within the notifications hooks, ensuring that state updates are only processed while the component is mounted, thereby preventing potential memory leaks.
|
Contributor
Builds ready [2b153c2]
⚡ Performance Benchmarks (1386 ± 107 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
salimtb
approved these changes
Feb 25, 2026
baptiste-marchand
approved these changes
Feb 26, 2026
oilnam
approved these changes
Feb 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
This update introduces a new
useSafeStatehook to manage state updates safely while components are mounted, preventing potential memory leaks and reduced the opportunity forReact: State updates on unmounted componentserrors.The
useListNotifications,useCreateNotifications,useEnableNotifications, anduseDisableNotificationshooks have been refactored to utilizeuseSafeStatefor 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.
Changelog
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
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
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
useSafeStatehook inuseNotifications.tsthat gatessetStatecalls behind a mounted check to avoid React warnings/memory leaks when async work completes after unmount.Refactors
useListNotifications,useCreateNotifications,useEnableNotifications, anduseDisableNotificationsto useuseSafeStateforloading/error/notificationsData, and updatesuseCallbackdependency arrays accordingly.Written by Cursor Bugbot for commit 2b153c2. This will update automatically on new commits. Configure here.