microsoft / microsoft/react-native-windows

Fabric `Text` component has some unnecessary redraws

Open
#12,024 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Fabric Area: Performance Area: Text bug New Architecture Workstream: Performance
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:

https://github.com/microsoft/react-native-windows/blob/a8aa86022e182b3b5b4afebd160fe8584f511ee4/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp#L46

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.

https://github.com/microsoft/react-native-windows/blob/a8aa86022e182b3b5b4afebd160fe8584f511ee4/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp#L49

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.