Improve Onyx.merge performance by informing listeners that a key has changed before persisting it in local storage

Context https://expensify.slack.com/archives/C01GTK53T8Q/p1618405920178400

Problem

When we set a key in onyx, the time it takes to inform listeners that they key was set is quite long. This is because we are waiting for the value to be saved to AsyncStorage, but there’s really no need for that wait.

Solution

We can inform listeners that the value has changed at the same time we tell AsyncStorage to save it.

Coming from https://github.com/Expensify/react-native-onyx/issues/63 the Onyx merge path is:

Onyx.merge -> get -> set -> AsyncStorage.setItem -> then(() => keyChanged(key, val))

The idea is to trigger keyChanged at the same time setItem or set is called.

[iwiznia]

hmmm from those numbers, it does not look like the change is worth it, agree?

[marcaaron]

Ok so this is just one test I ran but perhaps there are some better ideas…

Test

From completely empty storage measure the time it takes for Onyx.merge() to set post downloaded reportActions data to storage and then update the subscriber of the active report. This does not take into account network request time only the time between when data is returned from the fetch() and when the component props are updated with this data.

The before is with keyChanged() called after set() resolves and the after is with keyChanged() called before set() resolves.

Web

Before: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 58

After: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 52

iOS

Before: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 63

After: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 59

Android

Before: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 558

After: Timing:expensify.cash.fetchActionsAndDataAvailableToOnyx 482

There is some measurable performance impact, but I’d be curious to see a more global test. In general, moving the call to keyChanged() before set() improved timing a bit.

Note: Android looks much slower compared to others in this test, but we are comparing Apples to Androids and not all hardware emulation is equal.