Memoize GetLinksData for performance

`GetLinksData` is somewhat expensive.  The value won't change until user changes the window size or selects another homepage.

As we can't call an `effect` within a `memo`, we had to extract out `isLargeScreen` as an input parameter, which is fine as it makes `GetLinksData` more functional (functional programming).

ui/component/router/view.jsx

@@ -4,6 +4,7 @@ import { Route, Redirect, Switch, withRouter } from 'react-router-dom';
 
 import * as PAGES from 'constants/pages';
 import { PAGE_TITLE } from 'constants/pageTitles';
+import { useIsLargeScreen } from 'effects/use-screensize';
 import { lazyImport } from 'util/lazyImport';
 import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
 import { parseURI, isURIValid } from 'util/lbryURI';
@@ -172,10 +173,13 @@ function AppRouter(props: Props) {
   const urlParams = new URLSearchParams(search);
   const resetScroll = urlParams.get('reset_scroll');
   const hasLinkedCommentInUrl = urlParams.get(LINKED_COMMENT_QUERY_PARAM);
+  const isLargeScreen = useIsLargeScreen();
 
-  const dynamicRoutes = GetLinksData(homepageData).filter(
-    (potentialRoute: any) => potentialRoute && potentialRoute.route
-  );
+  const dynamicRoutes = React.useMemo(() => {
+    return GetLinksData(homepageData, isLargeScreen).filter(
+      (potentialRoute: any) => potentialRoute && potentialRoute.route
+    );
+  }, [homepageData, isLargeScreen]);
 
   // For people arriving at settings page from deeplinks, know whether they can "go back"
   useEffect(() => {

ui/component/sideNavigation/view.jsx

@@ -10,6 +10,7 @@ import Icon from 'component/common/icon';
 import NotificationBubble from 'component/notificationBubble';
 import I18nMessage from 'component/i18nMessage';
 import ChannelThumbnail from 'component/channelThumbnail';
+import { useIsLargeScreen } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
 import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 
@@ -129,7 +130,9 @@ function SideNavigation(props: Props) {
     activeChannelStakedLevel,
   } = props;
 
-  const EXTRA_SIDEBAR_LINKS = GetLinksData(homepageData).map(({ pinnedUrls, ...theRest }) => theRest);
+  const isLargeScreen = useIsLargeScreen();
+
+  const EXTRA_SIDEBAR_LINKS = GetLinksData(homepageData, isLargeScreen).map(({ pinnedUrls, ...theRest }) => theRest);
 
   const MOBILE_LINKS: Array<SideNavLink> = [
     {

ui/page/home/view.jsx

@@ -10,6 +10,7 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import WaitUntilOnPage from 'component/common/wait-until-on-page';
+import { useIsLargeScreen } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
 import { getLivestreamUris } from 'util/livestream';
 
@@ -41,9 +42,11 @@ function HomePage(props: Props) {
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
   const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
   const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
+  const isLargeScreen = useIsLargeScreen();
 
   const rowData: Array<RowDataItem> = GetLinksData(
     homepageData,
+    isLargeScreen,
     true,
     authenticated,
     showPersonalizedChannels,

ui/util/buildHomepage.js

@@ -5,7 +5,6 @@ import * as CS from 'constants/claim_search';
 import { parseURI } from 'util/lbryURI';
 import moment from 'moment';
 import { toCapitalCase } from 'util/string';
-import { useIsLargeScreen } from 'effects/use-screensize';
 import { CUSTOM_HOMEPAGE } from 'config';
 
 export type RowDataItem = {
@@ -128,6 +127,7 @@ export const getHomepageRowForCat = (cat: HomepageCat) => {
 
 export function GetLinksData(
   all: any, // HomepageData type?
+  isLargeScreen: boolean,
   isHomepage?: boolean = false,
   authenticated?: boolean,
   showPersonalizedChannels?: boolean,
@@ -137,8 +137,6 @@ export function GetLinksData(
   showIndividualTags?: boolean,
   showNsfw?: boolean
 ) {
-  const isLargeScreen = useIsLargeScreen();
-
   function getPageSize(originalSize) {
     return isLargeScreen ? originalSize * (3 / 2) : originalSize;
   }