Skip to content

perf: improve predict explore re-renders#30135

Merged
Prithpal-Sooriya merged 2 commits into
mainfrom
perf-improve-predict-explore-re-renders
May 13, 2026
Merged

perf: improve predict explore re-renders#30135
Prithpal-Sooriya merged 2 commits into
mainfrom
perf-improve-predict-explore-re-renders

Conversation

@Prithpal-Sooriya

@Prithpal-Sooriya Prithpal-Sooriya commented May 13, 2026

Copy link
Copy Markdown
Contributor

Description

Reduce tab performance degredation in explore - optimise predict rerenders.

From 60+ renders to 2/3

Changelog

CHANGELOG entry: perf: improve predict explore re-renders

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

https://www.loom.com/share/96f8b59522674684a93076e6e8e7c4fc

After

https://www.loom.com/share/34bffb5bcb59430286dac312e660d11e

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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.

Note

Low Risk
Low risk refactor focused on render performance: it only restructures how bet button press handlers are memoized and passed down, without changing pricing/market logic or external APIs.

Overview
Reduces re-renders in PredictActionButtons by extracting the OPEN-market bet button rendering into a new PredictBetButtonsContainer and memoizing onYesPress/onNoPress with useCallback (and the optional onDrawPress).

This keeps the bet button UI/props the same while avoiding new inline handler functions on each render.

Reviewed by Cursor Bugbot for commit 5dba77f. Bugbot is set up for automated code reviews on this repo. Configure here.

@Prithpal-Sooriya Prithpal-Sooriya requested a review from a team as a code owner May 13, 2026 17:41
@github-actions

Copy link
Copy Markdown
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.

const drawToken = buttonConfig.drawToken;

return (
<Box twClassName="w-full mt-4">

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simple perf - move into own component, where we can utilise useMemo/useCallback to prevent additional function creation on each render.

@Prithpal-Sooriya Prithpal-Sooriya changed the title pref: improve predict explore re-renders perf: improve predict explore re-renders May 13, 2026
@Prithpal-Sooriya Prithpal-Sooriya added the area-performance Issues relating to slowness of app, cpu usage, and/or blank screens. label May 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
  • Selected Performance tags: @PerformancePredict
  • Risk Level: low
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The change is a pure refactoring of PredictActionButtons.tsx:

  1. Extracts the inline JSX for the OPEN market case into a new PredictBetButtonsContainer sub-component
  2. Adds useCallback for onYesPress/onNoPress handlers and useMemo for onDrawPress (performance optimization to avoid re-creating arrow functions on every render)
  3. No functional behavior changes — same props, same logic, same UI output

Impact assessment:

  • SmokePredictions: Directly affected — PredictActionButtons is the primary interaction component for betting (Yes/No/Draw buttons) and claiming in prediction markets. Even though this is a refactor, the action buttons are the core interaction point and should be validated.
  • SmokeWalletPlatform: Required per SmokePredictions tag description — Predictions is a section inside the Trending tab, so changes to Predictions views affect Trending.
  • SmokeConfirmations: Required per SmokePredictions tag description — opening/closing positions are on-chain transactions that go through confirmations.

Risk is low because:

  • No logic changes, only structural refactoring
  • The useCallback/useMemo additions are standard React optimizations
  • The same props are passed to PredictBetButtons in the same way
  • The extracted PredictBetButtonsContainer is a simple wrapper with no new state or effects

Performance Test Selection:
The change adds useCallback and useMemo optimizations to PredictActionButtons, which are specifically intended to improve rendering performance by memoizing callback functions. The @PerformancePredict tag covers prediction market performance including deposit flows and balance display. Running this test can validate that the memoization improvements don't introduce regressions and potentially show performance gains.

View GitHub Actions results

@Prithpal-Sooriya

Copy link
Copy Markdown
Contributor Author

Skipping E2E as known failure

SmokeWalletPlatform: mUSD Conversion Happy Path › converts USDC to mUSD from Asset Overview
https://consensys.slack.com/archives/C02U025CVU4/p1778698549273839

@Prithpal-Sooriya Prithpal-Sooriya added the skip-e2e skip E2E test jobs label May 13, 2026
@sonarqubecloud

Copy link
Copy Markdown

@Prithpal-Sooriya Prithpal-Sooriya added this pull request to the merge queue May 13, 2026
Merged via the queue into main with commit 3595344 May 13, 2026
142 of 146 checks passed
@Prithpal-Sooriya Prithpal-Sooriya deleted the perf-improve-predict-explore-re-renders branch May 13, 2026 20:34
@github-actions github-actions Bot locked and limited conversation to collaborators May 13, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 13, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-performance Issues relating to slowness of app, cpu usage, and/or blank screens. release-7.78.0 Issue or pull request that will be included in release 7.78.0 size-S skip-e2e skip E2E test jobs team-assets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants