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:
parent
e3791aefdc
commit
f077110dec
3 changed files with 17 additions and 6 deletions
|
@ -30,6 +30,14 @@ export default handleActions(
|
||||||
) => {
|
) => {
|
||||||
const { blocked } = action.data;
|
const { blocked } = action.data;
|
||||||
const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
|
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 {
|
return {
|
||||||
...state,
|
...state,
|
||||||
blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,
|
blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { splitBySeparator } from 'lbry-redux';
|
import { splitBySeparator } from 'lbry-redux';
|
||||||
|
|
||||||
const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
|
type State = { blocked: BlocklistState };
|
||||||
|
|
||||||
export const selectMutedChannels = createSelector(selectState, (state: BlocklistState) => {
|
const selectState = (state: State) => state.blocked || {};
|
||||||
return state.blockedChannels.filter((e) => typeof e === 'string');
|
|
||||||
});
|
export const selectMutedChannels = (state: State) => selectState(state).blockedChannels;
|
||||||
|
|
||||||
export const makeSelectChannelIsMuted = (uri: string) =>
|
export const makeSelectChannelIsMuted = (uri: string) =>
|
||||||
createSelector(selectMutedChannels, (state: Array<string>) => {
|
createSelector(selectMutedChannels, (state: Array<string>) => {
|
||||||
|
|
|
@ -36,8 +36,11 @@ export const makeSelectPinnedCommentsForUri = (uri: string) =>
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
export const selectModerationBlockList = createSelector(selectState, (state) =>
|
export const selectModerationBlockList = createSelector(
|
||||||
state.moderationBlockList ? state.moderationBlockList.reverse() : []
|
(state) => selectState(state).moderationBlockList,
|
||||||
|
(moderationBlockList) => {
|
||||||
|
return moderationBlockList ? moderationBlockList.reverse() : [];
|
||||||
|
}
|
||||||
);
|
);
|
||||||
export const selectAdminBlockList = createSelector(selectState, (state) =>
|
export const selectAdminBlockList = createSelector(selectState, (state) =>
|
||||||
state.adminBlockList ? state.adminBlockList.reverse() : []
|
state.adminBlockList ? state.adminBlockList.reverse() : []
|
||||||
|
|
Loading…
Reference in a new issue