Skip to content

perf: skip and cache color computations in TouchableRipple and Chip (#4946) - #5113

Open
ErfanBagheri404 wants to merge 1 commit into
callstack:mainfrom
ErfanBagheri404:fix/4946-theme-color-perf-upstream
Open

perf: skip and cache color computations in TouchableRipple and Chip (#4946)#5113
ErfanBagheri404 wants to merge 1 commit into
callstack:mainfrom
ErfanBagheri404:fix/4946-theme-color-perf-upstream

Conversation

@ErfanBagheri404

Copy link
Copy Markdown

Fixes #4946

Changes

TouchableRipple - hoverColor is a web-only style (used only in state.hovered), but the color(calculatedRippleColor).fade(0.5).rgb().string() chain ran on every render of every TouchableRipple child, including on iOS/Android where the result was never read. Wrapped in React.useMemo gated by Platform.OS === 'web', so native skips the entire computation. TouchableRipple wraps buttons, list items, etc - this is one of the most-rendered components in the library.

Chip helpers - color(selectedColor).alpha(0.29).rgb().string() ran per Chip per render when a custom selection color was set. Replaced with a module-level Map cache (getSelectedColorBorder) keyed by the input color string, so the parse+alpha+stringify chain runs once per unique color and is reused on subsequent renders.

Benchmark (color@3.1.2)

Chain per call
.alpha(0.29).rgb().string() ~1.9 µs
.fade(0.5).rgb().string() ~2.2 µs
.isLight() ~0.46 µs

For a 30-item settings list where every row is wrapped in TouchableRipple: ~61 µs per parent re-render was spent computing hoverColor on native - pure dead work. After this change: 0.

What was already done upstream

The issue's original file list (Divider, List.Item, Appbar.Action, TextInput helpers) was stale - those sites were already fixed in recent commits. Only TouchableRipple and Chip remained.

Verification

  • jest - Chip: 27/27, TouchableRipple: 5/5
  • tsc -b - clean
  • eslint - clean

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.

Performance: theme color computations run on every render in List.Item, TextInput, Chip, Divider, Appbar.Action

1 participant