-
Notifications
You must be signed in to change notification settings - Fork 74
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
keyChange update key/connectionID for faster lookup #520
Conversation
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
I'm placing this on HOLD right now in order for QA to be done on the latest version of Onyx without more un-QAed PRs from being merged. |
I have read the CLA Document and I hereby sign the CLA |
lib/OnyxUtils.d.ts
Outdated
*/ | ||
declare function storeKeyByConnections(connectionID: string, key: OnyxKey): void; | ||
|
||
declare function deleteKeyByConnections(connectionID: number): void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NAB: Just incase these get refactored or a new function is created which separates them, would you mind adding a function comment for deleteKeyByConnections
too please?
Is this off HOLD? cc @mountiny who is assigned to the linked issue |
It is not off hold until we merge the onyx bump and deploy it, but we can review in the meantime |
I think we've likely bumped Onyx by now? |
# Conflicts: # lib/OnyxUtils.d.ts # lib/OnyxUtils.ts
Conflicts fixed |
@mountiny can we keep reviewing this PR? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM (just some stylistic discussion, but the main improvement is 🔥!)
lib/OnyxUtils.ts
Outdated
let stateMappingKeys = onyxKeyToConnectionIDs.get(key); | ||
|
||
if (!stateMappingKeys) { | ||
// Getting the collection key from the specific key because only collection keys were stored in the mapping. | ||
stateMappingKeys = onyxKeyToConnectionIDs.get(getPureKey(key)); | ||
if (!stateMappingKeys) { | ||
return; | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also NAB and just code style discussion / how explicit we want to be.
It might be more explicit:
const connectionKey = isCollectionKey(key) ? getPureKey(key) : key;
const stateMappingKeys = onyxKeyToConnectionIDs.get(connectionKey)
if (!stateMappingKeys) {
return;
}
Here we explicitly check for a collection key, instead of implicitly doing that by having a fallback check, which is more verbose
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Most of the time the key exists and isn't a collection, also when it enters the main loop
for (let i = 0; i < stateMappingKeys.length; i++) {
it also checks for isCollectionKey
, wanna avoid extra computation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
okay, makes sense. If its also that way for performance reasons, might be worth to add a comment to avoid future regressions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Something that I'm just realize, is when sending a key that is report_1234
it sends to any component listening to that specific key, but it also sends updates to all components listening to report_
, I'm looking into a way to update my code + keep the performance
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
We are handling an onyx update in this PR Expensify/App#42057 Lets wait for that to be in staging before merging this change |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM aside form one required JSDoc comment update
lib/OnyxUtils.ts
Outdated
* @param {OnyxKey} key - The key to process. | ||
* @return {string} The pure key without any numeric | ||
*/ | ||
function getPureKey(key: OnyxKey): string { |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
lib/OnyxUtils.ts
Outdated
let stateMappingKeys = onyxKeyToConnectionIDs.get(key); | ||
|
||
if (!stateMappingKeys) { | ||
// Getting the collection key from the specific key because only collection keys were stored in the mapping. | ||
stateMappingKeys = onyxKeyToConnectionIDs.get(getPureKey(key)); | ||
if (!stateMappingKeys) { | ||
return; | ||
} | ||
} | ||
|
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
lib/OnyxUtils.ts
Outdated
/** | ||
* It extracts the pure, non-numeric part of a given key. | ||
* | ||
* For example: | ||
* - `getPureKey("report_123")` would return "report_" | ||
* - `getPureKey("report")` would return "report" | ||
* - `getPureKey("report_")` would return "report_" | ||
* - `getPureKey(null)` would return "" | ||
* | ||
* @param {OnyxKey} key - The key to process. | ||
* @return {string} The pure key without any numeric | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The JSDoc still needs to be updated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chrispader what needs to be updated? can you help me I don't recall
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just the name and maybe we can change the description to
It extracts the non-numeric collection identifier of a given key.
or sth.
getCollectionKey
instead of getPureKey
Cool, will update, fix the comment and check if this makes sense |
# Conflicts: # lib/OnyxUtils.ts
All good from my side, this is still valid, just need to double check @chrispader comment about JSDoc |
Bumped for a review from @chrispader |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Still only the requested JSDoc comment update
@chrispader updated JSDoc |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the changes. LGTM!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding the tests.
I think we're ready to go here, are we waiting on any final reviews? |
Any news? @mountiny @Julesssss |
Sorry, I missed this one. Can you please create an onyx bump PR and assign me please? |
Ohhh maan, ok on my way, sorry for that |
@Julesssss new PR created: #565 |
Details
Following proposal: Expensify/App#35809
Related Issues
Manual Tests
Expensify/App#36226 (comment)
Author Checklist
### Related Issues
section aboveTests
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop