Memoize 'mutedAndBlockedChannelIds'

It was being recalculated repeatedly.

This memoizes it, although it still re-calculates occasionally despite none of the source arrays changed. I think it is due to the state change in the Preference Sync.

Note: input selectors to `createSelector` needs to be extractions-only (i.e. must not have transformations). I think most of our `makeSelect*` selectors violate this and broke memoization.

ui/component/claimTilesDiscover/index.js

@@ -6,14 +6,12 @@ import {
   selectFetchingClaimSearchByQuery,
   SETTINGS,
   selectClaimsByUri,
-  splitBySeparator,
   MATURE_TAGS,
 } from 'lbry-redux';
 import { doFetchViewCount } from 'lbryinc';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
-import { selectModerationBlockList } from 'redux/selectors/comments';
-import { selectMutedChannels } from 'redux/selectors/blocked';
+import { selectMutedAndBlockedChannelIds } from 'redux/selectors/blocked';
 import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
 import * as CS from 'constants/claim_search';
 
@@ -22,8 +20,7 @@ import ClaimListDiscover from './view';
 const select = (state, props) => {
   const showNsfw = selectShowMatureContent(state);
   const hideReposts = makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state);
-  const mutedUris = selectMutedChannels(state);
-  const blockedUris = selectModerationBlockList(state);
+  const mutedAndBlockedChannelIds = selectMutedAndBlockedChannelIds(state);
 
   return {
     claimSearchByQuery: selectClaimSearchByQuery(state),
@@ -31,9 +28,7 @@ const select = (state, props) => {
     fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
     showNsfw,
     hideReposts,
-    mutedUris,
-    blockedUris,
-    options: resolveSearchOptions({ showNsfw, hideReposts, mutedUris, blockedUris, pageSize: 8, ...props }),
+    options: resolveSearchOptions({ showNsfw, hideReposts, mutedAndBlockedChannelIds, pageSize: 8, ...props }),
   };
 };
 
@@ -52,8 +47,7 @@ function resolveSearchOptions(props) {
   const {
     showNsfw,
     hideReposts,
-    mutedUris,
-    blockedUris,
+    mutedAndBlockedChannelIds,
     location,
     pageSize,
     claimType,
@@ -71,10 +65,6 @@ function resolveSearchOptions(props) {
     claimIds,
   } = props;
 
-  const mutedAndBlockedChannelIds = Array.from(
-    new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
-  ).sort();
-
   const urlParams = new URLSearchParams(location.search);
   const feeAmountInUrl = urlParams.get('fee_amount');
   const feeAmountParam = feeAmountInUrl || feeAmount;

ui/component/claimTilesDiscover/view.jsx

@@ -72,8 +72,6 @@ type Props = {
   fetchingClaimSearchByQuery: { [string]: boolean },
   showNsfw: boolean,
   hideReposts: boolean,
-  mutedUris: Array<string>,
-  blockedUris: Array<string>,
   options: SearchOptions,
   // --- perform ---
   doClaimSearch: ({}) => void,
@@ -190,7 +188,7 @@ function areEqual(prev: Props, next: Props) {
     return false;
   }
 
-  const ARRAY_KEYS = ['prefixUris', 'channelIds', 'mutedUris', 'blockedUris'];
+  const ARRAY_KEYS = ['prefixUris', 'channelIds'];
   for (let i = 0; i < ARRAY_KEYS.length; ++i) {
     const key = ARRAY_KEYS[i];
     if (!urisEqual(prev[key], next[key])) {

ui/redux/selectors/blocked.js

@@ -1,5 +1,6 @@
 // @flow
 import { createSelector } from 'reselect';
+import { splitBySeparator } from 'lbry-redux';
 
 const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
 
@@ -11,3 +12,15 @@ 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();
+  }
+);