Repository navigation
[Due for payment 2026-04-23] Deprioritize FAB popover menu items in closed state #87158
Description
https://expensify.slack.com/archives/C05LX9D6E07/p1775136278120419
Background: The Floating Action Button (FAB) in the bottom tab bar lets users create expenses, reports, chats, invoices, and other items via a popover menu. A recent architectural refactor decomposed the original monolithic FAB into 9 self-subscribing menu item components, each owning its data through Onyx subscriptions. This improved code maintainability and established clear component boundaries. The FAB is part of the global navigation tab bar, which is mounted on every screen — Inbox, Search, Reports, and Settings. Each menu item independently subscribes to real-time data sources — reports, policies, transactions, and security groups — to determine its visibility and behavior when the popover opens.
Problem: When the FAB popover is closed, the app continuously processes real-time data updates for the popover's menu items, so every Pusher event touching reports, policies, or transactions burns JS thread time rendering invisible UI regardless of which screen the user is on.
Solution: Wrap the FAB popover menu content in React 19's component, toggling its mode between "visible" and "hidden" using the modal lifecycle callbacks (onModalWillShow / onModalHide). When mode is "hidden", React deprioritizes all updates to the subtree — the components remain mounted (preserving state
and avoiding remount cost), but Onyx subscriber callbacks are effectively deferred. When the user opens the menu, onModalWillShow switches to "visible" mode, and React processes any pending updates before the content appears.
This directly addresses the problem: while the menu is closed, the 9 menu items no longer compete for CPU time with the active UI. Measured impact:
- Active Onyx subscribers drop from 95 to 23 (-76%)
- Onyx connections drop from 40 to 22 (-45%)
- CPU time for 50 sequential report updates drops from 57.2ms to 40.8ms (-29%)
The change is a single-file edit to FABPopoverMenu.tsx — no individual menu item components need modification.
Activity
[-]Deprioritize FAB popover menu items in closed state[/-][+][Due for payment 2026-04-23] Deprioritize FAB popover menu items in closed state[/+]melvin-bot commentedon Apr 16, 2026
Reviewinglabel has been removed, please complete the "BugZero Checklist".melvin-bot commentedon Apr 16, 2026
The solution for this issue has been 🚀 deployed to production 🚀 in version 9.3.59-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2026-04-23. 🎊
For reference, here are some details about the assignees on this issue:
melvin-bot commentedon Apr 16, 2026
Triggered auto assignment to @mallenexpensify (
Awaiting Payment)melvin-bot commentedon Apr 21, 2026
@situchan Huh... This is 4 days overdue. Who can take care of this?
melvin-bot commentedon Apr 23, 2026
Payment Summary
Upwork Job
BugZero Checklist (@mallenexpensify)
situchan commentedon Apr 23, 2026
This is performance improvement. No need checklist.
mallenexpensify commentedon Apr 24, 2026
Payment Summary
Contributor+: @situchan due $250 via NewDot
laurenreidexpensify commentedon Apr 27, 2026
$250 approved for @situchan