perf(app): memoize board layout, update subplebbit view

src/app.tsx

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { isHomeView } from './lib/utils/view-utils';
-import { Subplebbit as SubplebbitType, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { Subplebbit as SubplebbitType, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
@@ -20,9 +20,9 @@ interface BoardLayoutProps {
   subplebbits: (SubplebbitType | undefined)[];
 }
 
-const BoardLayout = ({ subplebbits }: BoardLayoutProps) => {
+const BoardLayout = React.memo(({ subplebbits }: BoardLayoutProps) => {
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+  const subplebbit = useSubplebbit({ subplebbitAddress });
   const { address, createdAt, title } = subplebbit || {};
 
   return (
@@ -40,7 +40,7 @@ const BoardLayout = ({ subplebbits }: BoardLayoutProps) => {
       <Outlet />
     </>
   );
-};
+});
 
 const App = () => {
   const [theme] = useTheme();
@@ -67,7 +67,7 @@ const App = () => {
       <Routes>
         <Route path='/' element={<Home subplebbits={subplebbits} />} />
         <Route element={<BoardLayout subplebbits={subplebbits} />}>
-          <Route path='/p/:subplebbitAddress' element={<Subplebbit subplebbits={subplebbits} />} />
+          <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
           <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
         </Route>
         <Route path='/settings' element={<Settings />} />

src/views/subplebbit/subplebbit.tsx

@@ -1,26 +1,23 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks';
+import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './subplebbit.module.css';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
+
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-interface SubplebbitProps {
-  subplebbits: (SubplebbitType | undefined)[];
-}
-
-const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
+const Subplebbit = () => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
 
-  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+  const subplebbit = useSubplebbit({ subplebbitAddress });
   const { shortAddress, state, title } = subplebbit || {};
 
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');