fix(mobile): cleaning query cache when network changes [PERA-3678]#132
fix(mobile): cleaning query cache when network changes [PERA-3678]#132
Conversation
There was a problem hiding this comment.
I think this might be the actual problem with the account assets. We're storing a single assetIDs list, but the assets we need are different on testnet and mainnet I guess?
I don't know if this whole concept works tbh. It might be better to just rely on react-query caching or something. The idea here was to keep track of which assets the user is interested in and just fetch those once and keep them up to date but i don't know if that really works.
There was a problem hiding this comment.
@wjbeau I did a very thorough review on the implementation after your question and changed the implementation in many points
- Remove zustand, rely on react query alone
- Make sure it won't break app performance
- Make sure the assets will be updated whenever the network changes
- Make sure the transactions history will also be updated as the network changes
| const idsRef = useRef(ids) | ||
| if ( | ||
| ids.length !== idsRef.current.length || | ||
| !ids.every((id, i) => id === idsRef.current[i]) | ||
| ) { | ||
| idsRef.current = ids | ||
| } | ||
| const stableIds = idsRef.current |
There was a problem hiding this comment.
Why do we need this? Is it just to protect against ordering issues in the ids param? Some accounts have lots of assets (e.g. NFT collections) so it might not be cheap to do this.
There was a problem hiding this comment.
The comparison runs because callers like useAccountBalancesQuery create a new array every render via results.flatMap(...), even when the IDs haven't changed. Without this, useMemo([ids, network]) recomputes every render, recreating all query definitions and causing a re-render mess, which caused the app to feel very clunky and making even screen transitions feels dozens of seconds slower during my local tests.
But you are also right about the .every(), this can be simplified further. I'm pushing this change besides some explanation on why it's necessary.
| const idsRef = useRef(ids) | ||
| if ( | ||
| ids.length !== idsRef.current.length || | ||
| !ids.every((id, i) => id === idsRef.current[i]) | ||
| ) { | ||
| idsRef.current = ids | ||
| } | ||
| const stableIds = idsRef.current |
2 participants
Pull Request Template
Description
Related Issues
Checklist
Additional Notes