Prevent setting state for values that have not changed. Add additional Onyx debugging metrics.

[marcaaron]

Details

There are many calls to setState() in Onyx that can be avoided. The cost to calculate whether they have changed is lower than the cost to re-render the components that are subscribing to them. Therefore, it makes sense to use an optimized equality check to see if something has changed before we update a component.

I also added metrics that give us insights into why the setState() call is happening which can be enabled by using the ONYX_METRICS=true flag in the .env file.

Note: These metrics are currently broken on web due to some unrelated issue. And removing the applyDecorators() method will fix the build and allow our new logs to appear.

Metrics

FCP/LCP/etc on Web

without checks

with checks

Chat Switch Time on Web

without dequal checks:

with dequal checks:

There's ~ 90 ms improvement in the chat switching from reducing set state.

So far... not super impressive... but check out Android profiles on chat switching...

Chat Switch Time on Android

without checks

with checks

That's 664 ms difference which is pretty great.

Related Issues

Automated Tests

Linked PRs

[Szymon20000]

I'm not familiar with onyx but knowing other state management libraries I'm wondering if
would it be possible to make all data immutable so that it's enough to compare reference?
So whenever you want to make a change you take the object from the state management and even if you want to just change one property you create a new object.

[marcaaron]

Yeah, I think we can walk through that as an exercise. Probably first we need to understand whether we are passing around object references or new copies in some places to begin with. I am not actually 100% sure about this...

All the data a component initially receives will come from here:

react-native-onyx/lib/Onyx.js

Lines 563 to 574 in 3f936d9

	// If we have a withOnyxInstance that means a React component has subscribed via the withOnyx() HOC and we need to
	// group collection key member data into an object.
	if (mapping.withOnyxInstance) {
	if (isCollectionKey(mapping.key)) {
	getCollectionDataAndSendAsObject(matchingKeys, mapping);
	return;
	}
	// If the subscriber is not using a collection key then we just send a single value back to the subscriber
	get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key));
	return;
	}

This next part is confusing because we have two kinds of "subscribers" the collection or just normal key.

If we have a normal key the value in the cache it would be returned to the component otherwise we get it from storage, put it in the cache, and then return it:

react-native-onyx/lib/Onyx.js

Lines 45 to 62 in 3f936d9

	// When we already have the value in cache - resolve right away
	if (cache.hasCacheForKey(key)) {
	return Promise.resolve(cache.getValue(key));
	}
	const taskName = `get:${key}`;
	// When a value retrieving task for this key is still running hook to it
	if (cache.hasPendingTask(taskName)) {
	return cache.getTaskPromise(taskName);
	}
	// Otherwise retrieve the value from storage and capture a promise to aid concurrent usages
	const promise = Storage.getItem(key)
	.then((val) => {
	cache.set(key, val);
	return val;
	})

When it goes in the cache we don't do anything special to it so it should be a good reference

react-native-onyx/lib/OnyxCache.js

Lines 92 to 95 in 3f936d9

	set(key, value) {
	this.addKey(key);
	this.addToAccessedKeys(key);
	this.storageMap[key] = value;

If the key we are subscribing to is normal (non-"collection") we just set the value directly to state:

react-native-onyx/lib/Onyx.js

Lines 571 to 572 in 3f936d9

	// If the subscriber is not using a collection key then we just send a single value back to the subscriber
	get(mapping.key).then(val => sendDataToConnection(mapping, val, mapping.key));

react-native-onyx/lib/Onyx.js

Line 442 in 3f936d9

config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);

And the reference to these simple object I think should survive and be sent to the component:

react-native-onyx/lib/withOnyx.js

Lines 90 to 103 in 3f936d9

	setWithOnyxState(statePropertyName, val) {
	if (!this.state.loading) {
	this.setState({[statePropertyName]: val});
	return;
	}
	this.tempState[statePropertyName] = val;
	// All state keys should exist and at least have a value of null
	if (_.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]))) {
	return;
	}
	this.setState({...this.tempState, loading: false});

"Collection keys" work a bit different because we collect all the keys and then reduce them into a new object here:

react-native-onyx/lib/Onyx.js

Lines 484 to 488 in 3f936d9

	.then(values => _.reduce(values, (finalObject, value, i) => {
	// eslint-disable-next-line no-param-reassign
	finalObject[matchingKeys[i]] = value;
	return finalObject;
	}, {}))

Then the whole big object is set to a single reports key in the withOnyx state.

That's just to give an idea of the references the components start with:
- simple key same object in cache
- collection key new object with values referencing objects in the cache

Next we should look at how they are updated...

If a single key with object value is changed via a merge() then we batch all the merge calls and combine them with a reduce call (creating a new object each time):

react-native-onyx/lib/Onyx.js

Lines 761 to 771 in 3f936d9

	if (_.isObject(data) || _.every(mergeValues, _.isObject)) {
	// Object values are merged one after the other
	return _.reduce(mergeValues, (modifiedData, mergeValue) => {
	const newData = mergeWithCustomized({}, modifiedData, mergeValue);
	// We will also delete any object keys that are undefined or null.
	// Deleting keys is not supported by AsyncStorage so we do it this way.
	// Remove all first level keys that are explicitly set to null.
	return _.omit(newData, (value, finalObjectKey) => _.isNull(mergeValue[finalObjectKey]));
	}, data || {});
	}

Finally this new object is saved:

react-native-onyx/lib/Onyx.js

Line 816 in 3f936d9

return set(key, modifiedData);

And then stored in the cache + subscribers are notified with the new value:

react-native-onyx/lib/Onyx.js

Lines 685 to 686 in 3f936d9

	cache.set(key, value);
	notifySubscribersOnNextTick(key, value);

I think at this point it's safe to say that for the simple values this will always create a new object in the cache.

So even though we take the value from the cache and pass it to a subscriber here without modifying it when it is pulled from the cache:

react-native-onyx/lib/Onyx.js

Lines 411 to 413 in 3f936d9

	subscriber.withOnyxInstance.setState({
	[subscriber.statePropertyName]: data,
	});

So if we were to look at prevState I think we'd find that what is in the cache is not the same object and the simple compare wouldn't work (unless we first fix that or change how it works - I think that is the suggestion you are making 😄).

And if the key we changed belongs to a collection and the subscriber wants all the data then we do this:

react-native-onyx/lib/Onyx.js

Lines 398 to 406 in 3f936d9

	subscriber.withOnyxInstance.setState((prevState) => {
	const collection = prevState[subscriber.statePropertyName] || {};
	return {
	[subscriber.statePropertyName]: {
	...collection,
	[key]: data,
	},
	};
	});

Which in the case of reports would definitely be a new object since we are using a spread on the old collection.

Hopefully that's not TMI and helps give some ideas about how things work.

[marcaaron]

Actually going to split these debugging metrics and anything related to equality checks into separate PRs.