MetaMask / MetaMask/metamask-extension

[EPIC] Improve user experience and app responsiveness.

Open
#31,459 0 comments 3 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

epic external-contributor for-migration team-extension-platform
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.