Skip muted list update if no change

## Issue
Components render unnecessarily due to reference invalidation from `selectMutedChannels` selector.

## Notes
`selectMutedChannels` run and return a new reference each time the app gains focus. `createSelector` will not help in this case, because we are indeed invalidating the data in the store in `USER_STATE_POPULATE`.

## Changes
- Don't update the state if the array is identical in content.
- Fixed `selectMutedChannels` to return the reference from the store, so `createSelector` is not needed.
    - Also, the filtering is not needed because we've already done it in the reducer.

## Comments
I've done some profiling on large blocklists. The time needed for the array comparison is still an order magnitude lower than the time needed to render all the Components that got incorrectly marked by this.

The ideal solution is for the sync code to return a hash or timestamp of the array, so that we can compare that instead of the array.
This commit is contained in:
infinite-persistence 2021-10-05 22:09:49 +08:00
parent aabfc41ce9
commit 249b73f8c6
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 17 additions and 6 deletions

View file

@ -26,6 +26,14 @@ export default handleActions(
[ACTIONS.USER_STATE_POPULATE]: (state: BlocklistState, action: { data: { blocked: ?Array<string> } }) => {
const { blocked } = action.data;
const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
const next = sanitizedBlocked;
const prev = state.blockedChannels;
if (next && prev && prev.length === next.length && prev.every((value, index) => value === next[index])) {
return state;
}
return {
...state,
blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,

View file

@ -2,11 +2,11 @@
import { createSelector } from 'reselect';
import { splitBySeparator } from 'util/lbryURI';
const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
type State = { blocked: BlocklistState };
export const selectMutedChannels = createSelector(selectState, (state: BlocklistState) => {
return state.blockedChannels.filter((e) => typeof e === 'string');
});
const selectState = (state: State) => state.blocked || {};
export const selectMutedChannels = (state: State) => selectState(state).blockedChannels;
export const makeSelectChannelIsMuted = (uri: string) =>
createSelector(selectMutedChannels, (state: Array<string>) => {

View file

@ -36,8 +36,11 @@ export const makeSelectPinnedCommentsForUri = (uri: string) =>
}
);
export const selectModerationBlockList = createSelector(selectState, (state) =>
state.moderationBlockList ? state.moderationBlockList.reverse() : []
export const selectModerationBlockList = createSelector(
(state) => selectState(state).moderationBlockList,
(moderationBlockList) => {
return moderationBlockList ? moderationBlockList.reverse() : [];
}
);
export const selectAdminBlockList = createSelector(selectState, (state) =>
state.adminBlockList ? state.adminBlockList.reverse() : []