Skip to content

[No QA] perf: React Compiler Batch 3: setState-in-effect warnings#83382

Merged
roryabraham merged 80 commits into
mainfrom
rory-react-compiler-set-state-in-effect
Mar 6, 2026
Merged

[No QA] perf: React Compiler Batch 3: setState-in-effect warnings#83382
roryabraham merged 80 commits into
mainfrom
rory-react-compiler-set-state-in-effect

Conversation

@roryabraham

@roryabraham roryabraham commented Feb 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Explanation of Change

This PR resolves 46 react-hooks/set-state-in-effect React Compiler ESLint warnings across ~30 files, reducing --max-warnings from 381 to 335.

The primary refactoring pattern used is "adjust state during render" (React docs): instead of calling setState inside a useEffect to sync props/Onyx data to local state, we track previous dependency values in useState and conditionally update state during the render phase. This avoids cascading renders from synchronous setState in effects.

Additional cleanup per file:

  • Removed useMemo, useCallback, and React.memo from files that now compile cleanly with React Compiler (manual memoization is unnecessary and counterproductive when the compiler handles it)
  • Simplified derived state (e.g. computing values inline instead of storing in state)

Fixed Issues

(partial) #68765

Tests

  • Verify that no errors appear in the JS console
  • npm run lint passes with --max-warnings=346 (down from 383)
  • Each individual file passes npx eslint <file> --max-warnings=0

Relevant BrowserStack Test Cases (PR-51):

Workspace features (WorkspaceInitialPage, WorkspaceOverviewPage, withPolicyConnections):

  • TC-5076: Workspace Overview - Company Address
  • TC-4530: Profile - Change Workspace Name, description and Currency (offline)
  • TC-4535: Profile - Workspace Avatar (Offline)
  • TC-5412: Reports - Approver Button Behavior After Workspace Deletion and Transfer
  • TC-5078: Approver Button Behavior After Workspace Deletion and Transfer
  • TC-5063: Duplicate Workspace - All workspace features configured
  • TC-5064: Duplicate Workspace - No members and not all tabs enabled
  • TC-5077: Workspace Help Panel - Content Verification
  • TC-4035: Workspace settings display integration status - More Features (QBO)
  • TC-4054: Workspace settings display integration status - More Features (Xero)
  • TC-9779: Workspace - Audit Logs - Company Address Updates

Accounting connections (withPolicyConnections):

  • TC-4033: Integrate option enables the Accounting settings
  • TC-4034: Connect QBO
  • TC-4050: Disconnect QBO
  • TC-4053: Connect Xero
  • TC-4063: Disconnect Xero
  • TC-5161: Accounting Integration Status - Subtitle Logo Verification
  • TC-5043: Company Cards - Unapproved Card in Accounting

Expensify Card (ExpensifyCardContextProvider):

  • TC-3982: Admin - Issue a new card
  • TC-3987: Admin - Expensify card page with cards assigned
  • TC-5092: Expensify Card Assigned - Reveal card details
  • TC-5086: Expensify Card - Smart Limit Issuance with Disabled Approvals
  • TC-5027: Card reconciliation Settings

Company cards (AmexCustomFeed, TransactionStartDateStep):

  • TC-5441: Company Cards - Assign card (Offline)
  • TC-5252: Assigning Company Card to a New, Uninvited User
  • TC-3492: Feed Added - Assigned Card Details - Card name and Update Card
  • TC-3486: Adding a card feed - Bank Option - Amex - Pending feed state
  • TC-3490: Feed added - Assign a card
  • TC-3491: Feed Added - Several Cards assigned table view
  • TC-3496: Feed added - unassigning a card
  • TC-3497: Feed added - Card Feed Settings
  • TC-5442: Company Cards - Search Input Functional Validation
  • TC-5443: Company Cards - Table Filter Button Logic
  • TC-5444: Company Cards - Table Column Sorting

Virtual/lost card (ReportCardLostConfirmMagicCodePage):

  • TC-5423: Magic Code Input and Paste Behavior
  • TC-5439: Virtual Card - Replaced
  • TC-3990: Admin - Deactivate card

Avatar (Avatar.tsx):

  • TC-3297: Profile - Edit Avatar - PNG, SVG and GIF
  • TC-3298: Profile - Edit Avatar - Mobile
  • TC-3299: Profile - Edit Avatar - Size limit
  • TC-5071: Profile - Avatar Synchronization in Share Profile QR Code

Image viewing (Lightbox, ImageView, ThumbnailImage):

  • TC-4595: Expenses / Reports - Drag and drop receipt
  • TC-4593: 1:1 Chat - Add attachment and Scan receipts
  • TC-3601: Conversation History - Attachments - Mobile
  • TC-3602: Conversation History - Attachments - Attachment doesn't change with new message
  • TC-3603: Key Navigation - Conversation History - Attachments

Video (VideoPlayerPreview):

  • TC-3585: Compose box - Attachments - Video
  • TC-3586: Compose box - Attachments - Download Video

Drag and drop (useDragAndDrop):

  • TC-5251: Drag and Drop Zone - File Type Validation
  • TC-5151: Drag and Drop Zone - Room and Group chat
  • TC-4597: Drag and drop zone - Vertical stacking
  • TC-4598: Drag and drop zone - Error test

Search filters (SearchMultipleSelectionPicker):

  • TC-9777: Reports - Search field behavior and filters

Subscription/wallet (FreeTrial, WalletStatementPage, TermsStep):

  • TC-5431: Subscription - Trial banner
  • TC-3345: Subscription - Add payment method to the account
  • TC-5229: Wallet - Verification of KYC Failed Error State
  • TC-3339: Subscription - Error tests - Add payment card
  • TC-4273: Onboarding Flow - Expired Trial - Paywall is displayed for employee
  • TC-4792: Subscription - View payment history

Tasks (NewTaskDetailsPage, NewTaskPage):

  • TC-5445: Onboarding flow - Setup feature Task Visibility - Feature Disabled
  • TC-4493: Tooltips - Tooltips in Task Report
  • TC-3207: Self DM - User can send messages, tasks and attachments
  • TC-4472: 1:1 - Assign Subtask
  • TC-5037: Group Chat - Assignee Can Edit Task After Leaving Group
  • TC-5164: Onboarding flow - Corporate Card Task Visibility - Feature Disabled

Settlement (AnimatedSettlementButton):

  • TC-5233: 1:1 - Pay Expense - Receipt and Detail Capture
  • TC-5190: Pay Tab Refresh After Offline Payment

Locale/internationalization (LocaleContextProvider):

  • TC-60744: Workspace Expense - Currency Conversion Display

Offline tests

N/A — no behavioral changes, only refactoring how state is synchronized

QA Steps

N/A — [No QA] refactoring-only change with no behavioral differences

  • 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 followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
      • If any non-english text was added/modified, I used JaimeGPT to get English > Spanish translation. I then posted it in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and 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)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • 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)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • 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 a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • 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

N/A — refactoring only, no UI changes

Android: mWeb Chrome

N/A — refactoring only, no UI changes

iOS: Native

N/A — refactoring only, no UI changes

iOS: mWeb Safari

N/A — refactoring only, no UI changes

MacOS: Chrome / Safari

N/A — refactoring only, no UI changes

Made with Cursor

@melvin-bot

melvin-bot Bot commented Feb 24, 2026

Copy link
Copy Markdown

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

@roryabraham

This comment has been minimized.

Sign in to view
@melvin-bot

melvin-bot Bot commented Feb 24, 2026

Copy link
Copy Markdown

npm has a package.json file and a package-lock.json file. It seems you updated one without the other, which is usually a sign of a mistake. If you are updating a package make sure that you update the version in package.json then run npm install

chatgpt-codex-connector[bot]

This comment was marked as resolved.

Sign in to view

@roryabraham roryabraham changed the title [No QA] Fix 33 React Compiler setState-in-effect warnings [No QA] perf: React Compiler Batch 3: setState-in-effect warnings Feb 24, 2026
roryabraham and others added 24 commits February 24, 2026 14:26
@roryabraham @cursoragent
Fix React Compiler warning in Avatar
b243f11 
Replace useEffect+setState with React's recommended "adjust state
during rendering" pattern for resetting imageError when source changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in ThumbnailImage
f4442f8 
Replace useEffect+setState with adjust-state-during-render pattern.
Remove useCallback and React.memo since the file now compiles with
React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in RadioButtons
de2d12c 
Use controlled/uncontrolled pattern instead of syncing prop to state
via useEffect. When value prop is provided, use it directly.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in PlaidCardFeedIcon
0be8e54 
Replace useEffect+setState with adjust-state-during-render pattern.
Remove useMemo since the file now compiles with React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in TermsStep
ab0b41b 
Derive error visibility during render instead of clearing error state
in a useEffect. The error is shown only when both checkboxes are not
yet accepted, matching the original behavior without the effect.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in FreeTrial
f1ff5f9 
Compute freeTrialText inline during render instead of storing it in
state and updating via useEffect. Remove useState since the value is
purely derived from props and Onyx data.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in NewTaskDetailsPage
2d0b782 
Replace useEffect+setState with adjust-state-during-render pattern for
syncing task title and description from Onyx. Remove useMemo wrappers
since the file now compiles with React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in NewTaskPage
d20dbcc 
Move error message clearing from useEffect to render-time using a
composite key of task fields. Narrow the remaining effect to only
handle parentReportID changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in AutoUpdateTime
6fe38a8 
Move the synchronous time update from useEffect to render-time using
prev-timezone tracking. Keep only the interval in the effect. Remove
useCallback and useMemo since the file now compiles with React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in TransactionStartDateStep
3eef7c6 
Replace useEffect+setState with adjust-state-during-render pattern for
syncing dateOption and startDate from Onyx card data.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in AmexCustomFeed
329eef9 
Replace useEffect+setState with adjust-state-during-render pattern.
Remove useCallback and useMemo since the file now compiles with React
Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in TextInputWithSymbol (Android)
8cb0de6 
Replace useEffect+setState with adjust-state-during-render pattern for
setting the skip-selection-change flag when formattedAmount changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in AnimatedCollapsible
3ef5135 
Replace useEffect+setState with adjust-state-during-render pattern for
updating isRendered and shared value when isExpanded changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in useFilteredSelection
795142d 
Replace useEffect+setState with adjust-state-during-render pattern for
filtering selected options when options or filter function change.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in ReportCardLostConfirmMagicCodePage
2d89602 
Replace useEffect+setState with adjust-state-during-render pattern for
detecting new card IDs. Remove useCallback since the file now compiles
with React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warnings in VideoPlayerPreview
f72e00a 
Move synchronous dimension sync from useEffect to render-time for
non-web platforms. Replace playback state useEffect+setState with
adjust-state-during-render pattern for thumbnail toggling.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in TabSelectorItem
6e96db4 
Move the synchronous desktop shift reset from useLayoutEffect to
render-time. Keep async measurement in useLayoutEffect for mobile.
Remove useMemo since the file now compiles with React Compiler.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in CountryFullStep
62f792d 
Replace useEffect+setState with adjust-state-during-render pattern for
initializing userSelectedCountry from countryDefaultValue.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warnings in AnimatedSettlementButton
0281b5e 
Move animation reset state updates from useEffect to render-time.
Replace DOM measurement in effect with a callback ref that measures
width when the element mounts. Keep only the delayed hide timer in the
effect.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in useDismissModalForUSD
a87d9ec 
Replace useEffect+setState with adjust-state-during-render pattern.
Dismiss the modal when currency changes to USD instead of on every
render cycle.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in SearchMultipleSelectionPicker
62773af 
Replace useEffect+setState with adjust-state-during-render pattern for
syncing selectedItems when initiallySelectedItems changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in LocaleContextProvider
477b833 
Replace useEffect+setState with adjust-state-during-render pattern for
updating currentLocale when translations finish loading.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in withPolicyConnections
822be79 
Move isFetchingData state updates from useEffect to render-time. Keep
only the API call (openPolicyAccountingPage) in the effect.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham @cursoragent
Fix React Compiler warning in useFilteredOptions
ffa9ca5 
Replace useEffect+setState with adjust-state-during-render pattern for
resetting isLoadingMore when reportsLimit changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@roryabraham

roryabraham commented Mar 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@chuckdries I don't think running through all the test steps here on all platforms is really necessary because this has already been QA'd by Applause. I was able to repro and fix the couple bugs they reported.

chatgpt-codex-connector[bot]

This comment was marked as resolved.

Sign in to view

@roryabraham
Drop max warning count
c001093
@roryabraham
Add useInitialOnyxValue hook and fix ReportCardLostConfirmMagicCodePa…
737479b 
…ge hydration

The previous useInitialValue hook captured cardList on the first render,
which could be empty if Onyx hadn't hydrated yet. The new useInitialOnyxValue
hook subscribes to an Onyx key and captures its value once the status first
transitions to 'loaded', giving a stable snapshot unaffected by hydration timing.

Made-with: Cursor
@roryabraham
Guard SearchMultipleSelectionPicker consumers against Onyx hydration
c16a7ea 
Defer rendering SearchMultipleSelectionPicker until the search advanced
filters form has loaded from Onyx, preventing initiallySelectedItems
from being captured as empty during initial hydration.

Made-with: Cursor
@roryabraham

roryabraham commented Mar 6, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

chatgpt-codex-connector[bot]
chatgpt-codex-connector Bot reviewed Mar 6, 2026
View reviewed changes

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c16a7eab12

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/pages/workspace/WorkspaceInitialPage.tsx
Comment thread src/pages/workspace/WorkspaceOverviewPage.tsx
Comment thread src/components/Lightbox/index.tsx
chuckdries
chuckdries reviewed Mar 6, 2026
View reviewed changes

@chuckdries chuckdries left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly a huge fan of this, just had a few questions that are probably me being unfamiliar with react compiler

Comment thread src/components/TabSelector/TabSelectorItem.tsx
Comment thread src/components/AutoUpdateTime.tsx
Comment thread src/hooks/useDragAndDrop/index.ts
Comment thread src/components/AnimatedCollapsible/index.tsx
Comment thread src/hooks/useAutoFocusInput.ts
Comment thread src/hooks/useInitialOnyxValue.ts
Comment thread src/hooks/useTextWithMiddleEllipsis.ts
Comment thread src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardContextProvider.tsx
Comment thread src/pages/workspace/WorkspaceInitialPage.tsx Outdated
Comment thread src/components/LocaleContextProvider.tsx
@roryabraham
Refactor WorkspaceExpensifyCardPageEmptyState to use global useConfir…
0e76e00 
…mModal

Replace local ConfirmModal and useDismissModalForUSD with the global
useConfirmModal system. Auto-dismiss on external currency change to USD
is handled via useEffect. Remove all manual memoization since the
component compiles with React Compiler. Delete now-unused
useDismissModalForUSD hook and its tests.

Made-with: Cursor
@roryabraham
Simplify WorkspaceInitialPage feature state management
2ea889a 
Remove the complex featureStates local state buffer and derive all
values directly from the Onyx policy object. The highlight animation
for newly enabled features is now computed purely during render by
comparing current and previous pendingFields. This eliminates ~40
lines of diffing/buffering logic, removes useState, and reorganizes
the component for readability.

Made-with: Cursor
@roryabraham
Fix prettier
a9320cc
@roryabraham
Remove manual memoization from SearchFiltersCurrencyBase
ef63654 
Made-with: Cursor
@roryabraham
Fix subpath alias lint warning in useInitialOnyxValue
b252f5d 
Made-with: Cursor
@chuckdries

chuckdries commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

Reviewer Checklist

  • I have verified the author checklist is complete (all boxes are checked off).
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible 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 checked that screenshots or videos are included for tests on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
  • I verified tests pass on all platforms & I tested again on:
    • Android: HybridApp
    • Android: mWeb Chrome
    • iOS: HybridApp
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
  • I verified there are no new alerts related to the canBeMissing param for useOnyx
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and 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)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
  • 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 a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this 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.
  • I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp
Android: mWeb Chrome
iOS: HybridApp
iOS: mWeb Safari
MacOS: Chrome / Safari

@roryabraham roryabraham merged commit 30f21bb into main Mar 6, 2026
41 of 43 checks passed
@roryabraham roryabraham deleted the rory-react-compiler-set-state-in-effect branch March 6, 2026 19:51
@github-actions

github-actions Bot commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

🚧 @roryabraham has triggered a test Expensify/App build. You can view the workflow run here.

@OSBotify

OSBotify commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@github-actions

github-actions Bot commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #83382.

Android 🤖 iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-30f21bb-ff7dc59-4a8078910aef91280d4cd4be1030103086496e24/index.html https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-30f21bb-ff7dc59-bfafa66fd88316866fec23522be2ec10513fb949/index.html
Android iOS
Web 🕸️
https://83382.pr-testing.expensify.com
Web

👀 View the workflow run that generated this build 👀

@OSBotify OSBotify mentioned this pull request Mar 6, 2026
Closed
52 tasks
@OSBotify

OSBotify commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.33-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 failure ❌

@bernhardoj bernhardoj mentioned this pull request Mar 9, 2026
Closed
7 tasks
@OSBotify

OSBotify commented Mar 9, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/luacmartins in version: 9.3.33-5 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@mavrickdeveloper mavrickdeveloper mentioned this pull request Mar 11, 2026
Merged
53 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chatgpt-codex-connector chatgpt-codex-connector[bot] chatgpt-codex-connector[bot] left review comments

@chuckdries chuckdries chuckdries approved these changes

Assignees

@roryabraham roryabraham

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@roryabraham @lanitochka17 @IuliiaHerets @chuckdries @OSBotify