Skip to content

perf: reduce Market table resize rerenders#12476

Draft
huhuanming wants to merge 1 commit into
release/v6.5.0from
feat/tamagui-performance-analysis
Draft

perf: reduce Market table resize rerenders#12476
huhuanming wants to merge 1 commit into
release/v6.5.0from
feat/tamagui-performance-analysis

Conversation

@huhuanming

Copy link
Copy Markdown
Contributor

What changed

  • Keep Market desktop column descriptors stable across the gtLg and gtXl breakpoints, then filter only the active 8/9/11-column set.
  • Extract table cell rendering into a memoized MemoTableCell, allowing unchanged cells to skip React and Tamagui style resolution when a responsive column is added.
  • Add a production Market resize benchmark with equal-distance controls, visible-column fixture assertions, stale-build detection, thresholds, and aggregation.
  • Add Windows support for browser discovery, repository Yarn process spawning, agent checks, and the Web postbuild step.
  • Document the investigation, rejected alternatives, benchmark procedure, and follow-up work in the Tamagui performance handoff.

Why

The previous md resize case replaced the desktop/mobile shell, so it was not a fair measure of Market list performance. The corrected benchmark keeps the desktop shell stable and measures the real 8 -> 9 column transition around 1024 px.

At the breakpoint, useColumnsDesktop() previously rebuilt every column descriptor. Each memoized row received a new columns array and reconstructed every existing cell, causing repeated React work and deep Tamagui style resolution.

Impact

Production build, three-run median, 20 measured transitions per scenario:

Metric Baseline Candidate Change
Scripting 3,926 ms 895 ms -77.2%
Main-thread task duration 5,840 ms 2,534 ms -56.6%
Long-task total 4,203 ms 644 ms -84.7%
Maximum frame 300 ms 100 ms -66.6%
Dropped-frame estimate 265 79 -70.2%
Style recalculation 992 ms 904 ms -8.9%

The equal-distance non-breakpoint control scripting time also improved by 15.3%. Visible behavior remains 8 columns below 1024 px, 9 columns at gtLg, and 11 columns at gtXl. Hidden columns are not kept mounted.

Validation

  • yarn agent:check --profile commit
  • 8 focused Jest suites, 103 tests
  • Production three-run Market control/cross comparison
  • XL 9 -> 11 column stress run
  • Market cold-start and initial bundle budgets
  • Exact visible column counts, header/row alignment, horizontal overflow, and token-route click-through checks
  • git diff --check

Two alternatives that kept all 11 cells mounted using Tamagui responsive props or native CSS media classes were measured, regressed performance, and were reverted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant