Skip to content

[Due for payment 2025-08-26] [Due for payment 2025-08-13] [$250] Optimize usage of useOnyx selectors #67171

@mountiny

Description

@mountiny

Coming from here

Background

The useOnyx hook allows components to subscribe to data using a selector function.

Problem

When a component using useOnyx with a selector re-renders for any reason, it causes the getSnapshot function to perform an expensive deep equality comparison on the selector’s result, which prevents us from achieving optimal rendering performance in complex applications.

Solution

Add an internal, memoized selector to the useOnyx hook. This will perform the expensive deep equality check only when the source Onyx data changes, and will return a stable, cached object reference if the selected value is identical. This allows the main hook to use a much faster reference (===) check on every render, eliminating the performance bottleneck.
useOnyx times when opening an expense chat (Jason account):

  • Before: ~1s
  • After: ~250ms
Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021948745747705293799
  • Upwork Job ID: 1948745747705293799
  • Last Price Increase: 2025-07-25
Issue OwnerCurrent Issue Owner: @zanyrenney
Issue OwnerCurrent Issue Owner: @TMisiukiewicz

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.ExternalAdded to denote the issue can be worked on by a contributorWeeklyKSv2

Type

No type
No fields configured for issues without a type.

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions