microsoft / microsoft/react-native-windows
Fabric `Text` component has some unnecessary redraws
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
I was debugging through some Text behavior on Fabric and noticed some logic that can trigger a redraw when one isn't necessary:
This compares the color values, which is going to check for equality of both the resolved m_color and the m_platformColor. However it's possible that there are different platform color values that resolve to the same color. Example I'm seeing: "ButtonForeground" and "ButtonForegroundPointerOver" both resolve to #00000000. There should be no rendered change, but we set this as needing a redraw.
This compares the opacity value, but opacity can be NaN. And if you compare NaN to NaN, it will return false. Effectively these should be the same, but once again it invalidates the text.
Steps To Reproduce
Place a breakpoint in DrawText and see it get hit when you wouldn't expect (e.g. hovering over a Button).
Expected Results
No response
CLI version
12.0.0-alpha.6
Environment
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.23528
CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores "
Memory: 37.38 GB / 63.86 GB
Binaries:
Node:
version: 18.17.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 9.4.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions:
- 10.0.18362.0
- 10.0.19041.0
- 10.0.22000.0
- 10.0.22621.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.6.33829.357 (Visual Studio Community 2022)
- 16.11.33801.447 (Visual Studio Community 2019)
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.0-nightly-20230721-ccc50ddd2
wanted: 0.73.0-nightly-20230721-ccc50ddd2
react-native-windows:
installed: 0.0.0-canary.693
wanted: 0.0.0-canary.693
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Target Platform Version
None
Target Device(s)
No response
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp at the cited lines, then use the DrawText breakpoint and the described Button hover case to observe the unnecessary redraws. Done means equivalent resolved colors and equivalent NaN opacity values no longer invalidate the text when no rendered change occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 44/100