Repository navigation
Skip redrawing iOS Text when only its position changes - #59155
Open
hryhoriiK97 wants to merge 1 commit into
Open
hryhoriiK97 wants to merge 1 commit into
hryhoriiK97 wants to merge 1 commit into
Conversation
hryhoriiK97
force-pushed
the
ios-text-skip-position-redraw
branch
from
October 16, 2026 23:19
69e6b87 to
d387cce
Compare
`RCTParagraphComponentView` requested a redraw on every layout metrics update and on every state update. Both fire for a paragraph that merely moved: the mounting layer sends layout metrics whenever the origin changes, and a relayout gives the paragraph a new state even with unchanged text, because the attributed string records each fragment's layout metrics. A reflow above a list therefore redrew every paragraph below it. Text is drawn relative to the view's own bounds and content frame, from the content and paragraph attributes in its state. Redraw only when one of those, or the pixel density, changed. Strings with inline views keep redrawing on every state, since attachment sizes come from the layout metrics the content comparison ignores. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
hryhoriiK97
force-pushed
the
ios-text-skip-position-redraw
branch
from
October 17, 2026 12:00
d387cce to
6d5de49
Compare
meta-codesync Bot
pushed a commit
that referenced
this pull request
Oct 19, 2026
Summary: `RCTViewComponentView` (`React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm`) applies a view's borders, shadow path, background colour and image layers, box shadows, outline, filters and clipping masks in `invalidateLayer`, which runs from `finalizeUpdates:` whenever `_needsInvalidateLayer` is set. **Current behavior.** `updateLayoutMetrics:oldLayoutMetrics:` sets `_needsInvalidateLayer` unconditionally. The mounting layer calls it whenever any layout metric differs, including the frame origin alone, so a view that merely moved runs the whole invalidation: it resolves border metrics, recreates the shadow path, re-applies about ten layer properties, re-rasterizes the border image when borders are non-uniform, and removes and recreates the box-shadow, outline, background-image and mask sublayers. When the content above a list changes height, every card below it pays this although nothing it draws has changed. **With this change.** The layout metrics are compared with the stored ones with the origin masked out. If only the origin changed, the invalidation is not requested; every other change (size, content insets, border widths, overflow inset, display type, layout direction, scale factor) still invalidates as before, and so does a recycled view, whose stored metrics are `EmptyLayoutMetrics`. Everything `invalidateLayer` derives is in the view's own coordinate space (`bounds`, `layer.bounds`, padding frame), with one exception: the iOS 17 hover shape is built from `self.frame` to work around a UIKit bug, so views with `cursor: pointer` keep invalidating on moves. The subview and sublayer frame updates in `updateLayoutMetrics:` are unchanged. **Why.** Position-only layout updates are the common case in a reflow: inserting a row, expanding an accordion, a keyboard-avoiding shift, or a LayoutAnimation moving content. The cost scales with the number of styled views below the change. ## Changelog: [IOS] [FIXED] - Views no longer rebuild their layer styling (borders, shadows, background and mask layers) when only their position changes Pull Request resolved: #59168 Test Plan: - `node scripts/clang-format.js --check` on the changed file passes. - RNTester built with `xcodebuild` in Release and run on a physical iPhone 15 Pro (iOS 26.6.1). - In screenshots of a reflowed list of 1000 cards (border radius, 1pt border, solid background, shadow props) and of the same list with `boxShadow`, the list area is byte-identical before and after. - **Measurement.** RNTester Playground with 1000 cards mounted in a `ScrollView`, each a `View` wrapping a `Text`; a "reflow" toggles a spacer above the list between 0 and 40pt, so every card moves and none changes size. Three contents: plain (unstyled wrapper, which Fabric flattens, so only the `Text` views remain), card (`borderRadius: 8`, `borderWidth: 1`, solid `backgroundColor`, `shadowColor/Opacity/Radius/Offset`) and the same card with `boxShadow` instead. Timed from Fabric's transaction telemetry (mount phase), a timer around `invalidateLayer`, a run-loop observer after the CoreAnimation commit (mount end to display), and the `touchend` Event Timing entry for the press (press to mount end). The two arms are the same binary with the new check switched by an environment variable; both include #59155 so that text redraws do not dominate the reflow. The presses were driven by [Argent](https://github.com/software-mansion/argent) on the physical iPhone, with no accessibility polling between presses. iPhone 15 Pro, Release, medians of 5 reflows: | reflow with 1000 cards (shadow props) | before | this PR | change | |---|--:|--:|--:| | layer invalidations | 1001 | 13 | | | `invalidateLayer` total (main thread) | 59.2 ms | 1.5 ms | −97% | | mount phase (main thread) | 61.5 ms | 3.8 ms | −94% | | mount end to display | 5.3 ms | 1.4 ms | | | press to mount end | 114.6 ms | 69.9 ms | −39% | | reflow with 1000 cards (`boxShadow`) | before | this PR | change | |---|--:|--:|--:| | layer invalidations | 2001 | 10 | | | `invalidateLayer` total (main thread) | 66.6 ms | 0.9 ms | −99% | | mount phase (main thread) | 70.4 ms | 4.0 ms | −94% | | mount end to display | 18.3 ms | 0.1 ms | −99% | | press to mount end | 126.8 ms | 42.5 ms | −66% | Each arm was run twice. The repeat of the before arm gave 114.1 ms and 132.1 ms press to mount end for the two card styles (58.2 ms and 66.9 ms of invalidation), the repeat of the after arm 52.3 ms and 53.2 ms (1.1 ms and 0.9 ms), so the saving is 39 to 68% of the press across both runs and both card styles. The remaining invalidations are views whose size or props do change in that commit, such as the harness's own status labels. The plain list is unchanged (0.8 ms of invalidation per reflow before, under 0.1 ms after, press to mount end within noise at 41 and 46 ms), as are mounting and unmounting: mounting the 1000 cards measures 141 ms in the mount phase in both arms, with the same 2001 invalidations. Not exercised: the hover shape for `cursor: pointer`, which needs a pointer device; by design those views invalidate on moves exactly as before. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed By: cipolleschi Differential Revision: D126038802 Pulled By: javache fbshipit-source-id: d70780f522c85d90a077a46e3a3a31e433ab3cd5
javache
reviewed
Oct 19, 2026
| BOOL needsDisplay = YES; | ||
| if (newState && oldState && _textView.state) { | ||
| const auto &newData = newState->getData(); | ||
| const auto &oldData = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(oldState)->getData(); |
Contributor
There was a problem hiding this comment.
Should we use _textView.state? That's the state the view was last mounted with, which may be different from oldState due to recycling.
Suggested change
| const auto &oldData = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(oldState)->getData(); | |
| const auto &oldData = static_cast<const ParagraphShadowNode::ConcreteState &>(*oldState)->getData(); |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
RCTParagraphComponentViewdraws its text in a childRCTParagraphTextView, positioned at the paragraph's content frame within the view's own bounds.Current behavior. The view requests a redraw of its text on every layout metrics update and on every state update. Both fire for a paragraph that has merely moved:
AttributedStringequality includes each fragment'sparentShadowView, whose layout metrics changed, soParagraphShadowNode::updateStateIfNeededsees a different string.So when the content above a paragraph changes height, every paragraph below it re-runs TextKit layout and glyph rasterization, although its bounds, padding and text are unchanged. A row inserted at the top of a non-virtualized list redraws every label under it.
With this change. A redraw is requested only when something the drawing depends on changed:
updateLayoutMetrics:, the view's frame size, its content frame (which carries the content insets the drawing origin is derived from), or the pixel scale factor;updateState:, the text content (AttributedString::isContentEqual, which compares strings and text attributes but not layout metrics) or the paragraph attributes. A string containing inline views keeps redrawing on every state, since attachment sizes come from the layout metrics the content comparison ignores.A recycled view always receives a new state before it is displayed, and the first state of a view always redraws, so neither comparison can skip a needed redraw.
Why. Text drawing is the most expensive per-view work on the main thread during a reflow, and none of it is needed when the paragraph only moved.
Changelog:
[IOS] [FIXED] - Text no longer redraws when only its position changes, such as when content above it changes height
Test Plan:
node scripts/clang-format.js --checkon the changed file passes.xcodebuildin Release for a physical iPhone 15 Pro; the Text examples render as before, including after content above a paragraph changes height, after a paragraph's own size changes, and after a text change with unchanged metrics.ScrollView; a "reflow" toggles the height of a spacer above the labels from 0 to 40 pt, so every label moves and none changes size. Timed from Fabric's transaction telemetry, a run-loop observer after the CoreAnimation commit (mount end to display), a timer around-[RCTParagraphTextView drawRect:], and thetouchendEvent Timing entry for the press (press to mount end). The two arms are the same binary with the new checks switched by an environment variable. iPhone 15 Pro, Release, medians of 5 presses:drawRecttotal, system fontdrawRecttotal,fontFamily: 'Avenir'The one remaining redraw is the harness's own status label, whose text changes. The table above is from manual presses. The same sequence was then driven by Argent on the device: with this change it again redrew 0 to 4 labels per reflow and measured 33 to 74 ms press-to-mount across ten reflows; without it, the reflows that redrew measured 150 to 200 ms press-to-mount, matching the manual figures. Mount and unmount figures agreed between the two methods within noise. Press-to-mount also drops because the main thread no longer spends the previous frame drawing before it can run the next mount. Mounting, unmounting and text changes are unchanged within noise: mounting the same 1000 labels measures 113 ms to display in both arms.
🤖 Generated with Claude Code