Skip to content

perf: stop Inbox rows re-rendering when a right-hand panel opens - #106735

Open
BartekObudzinski wants to merge 1 commit into
Expensify:mainfrom
callstack-internal:perf/lhn-rows-skip-rerender-on-rhp-open
Open

BartekObudzinski wants to merge 1 commit into
Expensify:mainfrom
callstack-internal:perf/lhn-rows-skip-rerender-on-rhp-open

Conversation

@BartekObudzinski

@BartekObudzinski BartekObudzinski commented Nov 12, 2026 •

Copy link
Copy Markdown
Contributor

Explanation of Change

LHNTooltipContextProvider put useIsFocused() and a root navigation flag in the same context value that every Inbox row reads. Opening an RHP, such as Create expense, takes focus away from the Inbox. The value changed, so every visible row re-rendered together with everything under it, even though the Inbox is hidden behind the RHP. On native the Inbox tab stays mounted under every RHP, so this cost grows with the number of reports.

The context is now split in three:

  1. LHNTooltipContext keeps the onboarding data the rows show.
  2. LHNTooltipActionsContext holds hideConciergeTooltip and getIsScreenFocused. They are backed by refs, so the value never changes and rows never re-render because of it. Pressable uses them on press and long press.
  3. LHNTooltipVisibilityContext holds the focus, navigation and fullscreen flags. Only the row that renders the Concierge tooltip reads it.

The provider now calls useLHNRowProductTrainingTooltip once instead of once per row. The Concierge LHN tooltip is currently disabled (shouldShow returns false in TOOLTIPS.ts), so its behavior can't change. The hide path is kept so it still works if the tooltip is turned back on.

Performance, iOS simulator (iPhone 18 Pro, DEV build), heavy account, Create expense opened from the Inbox through the actions menu with Manual as the last tab, 6 interleaved blocks of 6 opens after warmup:

Build Median Mean p90
main 318ms 477ms 938ms
This PR 240.5ms 288ms 397ms

In the commit that mounts the page, the Inbox list goes from about 21ms of render time to 0.4ms.

Fixed Issues

$ #106767
PROPOSAL:

Tests

  1. Sign in on iOS or Android with an account that has many chats and open the Inbox.
  2. Long press a chat row. Verify the context menu opens (Mark as unread, Pin or Unpin).
  3. Close the menu and tap a chat row. Verify the chat opens.
  4. Go back, open the actions menu and tap Create expense. Verify the Create expense page opens and closing it returns to the Inbox.
  • Verify that no errors appear in the JS console

Offline tests

Same as tests while offline. The change only affects rendering, with no API calls.

QA Steps

Same as tests.

  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I verified any copy / text that was added to the app is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • If new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If the PR adds or modifies the UI:
    • I asked an AI agent to review the changes for accessibility issues and addressed its findings.
    • I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order.
    • I verified all new/changed elements have meaningful accessible names and roles.
    • I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected).
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native

Long press and tap on Inbox rows: VIDEO_TO_UPLOAD

iOS: mWeb Safari
MacOS: Chrome / Safari

@codecov

codecov Bot commented Nov 12, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines Coverage Δ
...nents/LHNOptionsList/LHNTooltipContextProvider.tsx 97.36% <100.00%> (+2.36%) ⬆️
...HNOptionsList/OptionRowLHN/OptionRow/Pressable.tsx 91.04% <100.00%> (-0.14%) ⬇️
...st/OptionRowLHN/useLHNRowProductTrainingTooltip.ts 100.00% <100.00%> (ø)
...rc/components/LHNOptionsList/LHNTooltipContext.tsx 81.81% <75.00%> (-18.19%) ⬇️
... and 466 files with indirect coverage changes

@BartekObudzinski
BartekObudzinski marked this pull request as ready for review November 13, 2026 07:23
@BartekObudzinski
BartekObudzinski requested review from a team as code owners November 13, 2026 07:23
@melvin-bot
melvin-bot Bot requested review from aimane-chnaif and dylanexpensify and removed request for a team November 13, 2026 07:23
@melvin-bot

melvin-bot Bot commented Nov 13, 2026

Copy link
Copy Markdown

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@BartekObudzinski

Copy link
Copy Markdown
Contributor Author

@MelvinBot test

@melvin-bot
melvin-bot Bot removed the request for review from a team November 13, 2026 07:23
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 13, 2026 •

Copy link
Copy Markdown
Codex Review Summary: ✅ Completed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-13T07:43:13.222986Z 657db3f Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@MelvinBot

MelvinBot commented Nov 13, 2026 •

Copy link
Copy Markdown
Contributor

🤖 Web test steps verification results: ⚠️ partial

Dev NewDot web coverage was blocked by the available fixture and automation limitations. Native gestures and performance were not tested; failed checks below indicate incomplete verification, not confirmed product defects.

Web state after attempting Create expense from the Inbox actions menu

Step Status
1. Online: sign in and open high-traffic InboxSigned in and opened Inbox, but no chat-row list or high-traffic account was available.
❌
2. Online: open chat context menuBlocked: no chat row available to verify Mark as unread and Pin/Unpin.
❌
3. Online: dismiss menu and open chatBlocked by the missing chat-row fixture.
❌
4. Online: Create expense and return to InboxCreate expense appeared in the actions menu, but an overlay/no usable target bounds prevented activation.
Web state after attempting Create expense from the Inbox actions menu
❌
5. Online: no JavaScript console errorsNot verified: supported tooling provides no console inspection.
❌
6. Offline: high-traffic InboxNot tested: offline control and high-traffic fixture unavailable.
❌
7. Offline: chat context menuNot tested: offline control and chat-row fixture unavailable.
❌
8. Offline: dismiss menu and open chatNot tested: offline control and chat-row fixture unavailable.
❌
9. Offline: Create expense and return to InboxNot tested: offline control unavailable.
❌
10. Offline: no JavaScript console errorsNot tested: offline control and console inspection unavailable.
❌

view run · view recording

This branch has not been deployed

No deployments
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.

2 participants