Migrate from mobx-react to mobx-react-lite / Removed mobx-utils Dependency

[heorhi-deriv]

Migrate to mobx-react-lite

This pull request updates our project to use mobx-react-lite instead of mobx-react. The primary motivation for this change is to leverage the lightweight nature of mobx-react-lite, which is optimized for functional components. This change helps in reducing the bundle size and improving performance.

---

Key Changes

• Updated import statements to use observer from mobx-react-lite.
• Ensured all components using observer are functional components, as mobx-react-lite does not support class components.

---

Benefits

• Reduced Bundle Size: The lighter library decreases the overall size of the application.
• Improved Performance: Functional components work more efficiently with mobx-react-lite.
• Simplified Codebase: Adopting modern React patterns results in cleaner and more maintainable code.

---

Bundle size after migration

Refactor: Removed mobx-utils Dependency

This pull request removes the dependency on the mobx-utils library by replacing the usage of computedFn with a manual caching solution using MobX's core features.

Key Changes

• Replaced computedFn with a custom implementation using observable.map from MobX.
• Added an observable.map (getPositionByIdCache) to act as a reactive cache for the getPositionById method.
• Cleared the cache (getPositionByIdCache) whenever positions is updated to ensure no stale data is returned.
• Maintained all functionality of computedFn with behavior parity, including:
  • Memoization: Cached results for specific arguments (id).
  • Reactivity: Automatically recomputed when the underlying positions array changes.

Benefits

• No External Dependency: Eliminates the need for mobx-utils, reducing the dependency footprint.
• Maintains Performance: Preserves memoization and reactivity for efficient lookups without unnecessary recomputation.
• Simplifies Codebase: Relies entirely on core MobX features (observable.map) for reactive caching, ensuring consistency and easier maintenance.

By removing mobx-utils and leveraging MobX's built-in features, we reduce external dependencies while maintaining reactivity and performance.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Dec 30, 2024 6:35am

[coveralls]

Pull Request Test Coverage Report for Build 12542715304

Details

• 6 of 6 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.003%) to 53.792%

---

Totals
Change from base Build 12542204007:	0.003%
Covered Lines:	33047
Relevant Lines:	57237

---

💛 - Coveralls

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: Migrate from mobx-react to mobx-react-lite / Removed mobx-utils Dependency #17759
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-heorhi-deriv-mobx-multiple-instances-fix.binary.sx?qa_server=red.derivws.com&app_id=24061
  • Original: https://deriv-app-git-fork-heorhi-deriv-mobx-multiple-instances-fix.binary.sx
• App ID: 24061

Click here to copy & paste above information.

- **PR**: [https://github.com/deriv-com/deriv-app/pull/17759](https://github.com/deriv-com/deriv-app/pull/17759)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-heorhi-deriv-mobx-multiple-instances-fix.binary.sx?qa_server=red.derivws.com&app_id=24061
    - **Original**: https://deriv-app-git-fork-heorhi-deriv-mobx-multiple-instances-fix.binary.sx
- **App ID**: `24061`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	38
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-heorhi-deriv-mobx-multiple-instances-fix.binary.sx/