249b73f8c6
## 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.
26 lines
840 B
JavaScript
26 lines
840 B
JavaScript
// @flow
|
|
import { createSelector } from 'reselect';
|
|
import { splitBySeparator } from 'util/lbryURI';
|
|
|
|
type State = { blocked: BlocklistState };
|
|
|
|
const selectState = (state: State) => state.blocked || {};
|
|
|
|
export const selectMutedChannels = (state: State) => selectState(state).blockedChannels;
|
|
|
|
export const makeSelectChannelIsMuted = (uri: string) =>
|
|
createSelector(selectMutedChannels, (state: Array<string>) => {
|
|
return state.includes(uri);
|
|
});
|
|
|
|
export const selectMutedAndBlockedChannelIds = createSelector(
|
|
selectState,
|
|
(state) => state.comments,
|
|
(state, commentsState) => {
|
|
const mutedUris = state.blockedChannels;
|
|
const blockedUris = commentsState.moderationBlockList;
|
|
return Array.from(
|
|
new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
|
|
).sort();
|
|
}
|
|
);
|