MetaMask / MetaMask/metamask-extension
[EPIC] Improve user experience and app responsiveness.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
### What is this about?
Extension codebase is presently on React v16.12.0 , which according to [npmjs](https://www.npmjs.com/package/react?activeTab=versions) is 7 years old. React v18 introduces features like concurrent rendering and automatic batching which lead to smoother and more responsive user interactions, thus directly enhancing the overall user experience.
React v18 introduces new hooks and improved suspense, making it easier to manage asynchronous operations and state transitions, thereby improving code maintainability and contributor velocity. Using React v18 specific APIs in design system components would enable better sharing across Extension and Portfolio.
React19 has a standout addition is the experimental React Compiler, which promises to significantly boost performance by automatically optimizing component rendering. The new Actions API simplifies data mutations and form handling, while full support for server components enhances server-side rendering capabilities. React 19 also introduces enhanced hooks like useFormStatus and useActionState, improving state management and form interactions. Asset loading has been optimized for smoother page transitions, and there are numerous other improvements including better error reporting, support for asynchronous scripts, and simplified ref handling. These updates collectively aim to enhance developer productivity, application performance, and user experience, making the upgrade to React 19 a compelling option for many projects.
Work encompassed:
- Upgrade React to v17
- Upgrade React to v18
- React Router Upgrade may be required
- Upgrade React to v19 (stretch goal)
### Scenario
_No response_
### Design
_No response_
### Technical Details
_No response_
### Threat Modeling Framework
_No response_
### Acceptance Criteria
_No response_
### Stakeholder review needed before the work gets merged
- [x] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)
### References
_No response_
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.