Skip to content

Implement a global snapshot cache system for Onyx #68014

Description

@mountiny

Coming from here

Background

The useOnyx hook uses React’s useSyncExternalStore pattern, which relies on a getSnapshot function to retrieve the current state value. This function is called frequently during renders and state updates to ensure components stay synchronized with the Onyx store. Each useOnyx hook instance maintains its own getSnapshot implementation that processes the raw Onyx data according to the hook’s configuration options and selector functions.

Problem

When multiple useOnyx hooks use identical key and options combinations, each hook redundantly computes the same getSnapshot result, leading to redundant computations and missed render optimizations.

Solution

Implement a global snapshot cache system that stores computed getSnapshot results keyed by both the Onyx key and the options configuration. This ensures that identical getSnapshot computations across multiple useOnyx instances are performed only once, with all instances sharing the cached result until data changes.

Measurements of useOnyx in the app (Greeny’s account):

  • App opening: 780ms → 202ms
  • Create expense: 1014ms → 489ms
  • Send message: 169ms → 34ms
Issue OwnerCurrent Issue Owner: @TMisiukiewicz

Metadata

Metadata

Labels

BugSomething is broken. Auto assigns a BugZero manager.ReviewingHas a PR in reviewWeeklyKSv2

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