WIP optimize re-rendering

src/components/Main.tsx

@@ -252,6 +252,8 @@ const firstSceneScreenOptions: StackNavigationOptions & BottomTabNavigationOptio
   headerTitleAlign: 'center'
 }
 
+const homeSceneOptions: StackNavigationOptions & BottomTabNavigationOptions = { ...defaultScreenOptions, ...firstSceneScreenOptions }
+
 // -------------------------------------------------------------------------
 // Tab router
 // -------------------------------------------------------------------------
@@ -408,7 +410,7 @@ const EdgeTabs = () => {
         headerShown: false
       }}
     >
-      <Tabs.Screen name="home" component={HomeScene} options={{ ...defaultScreenOptions, ...firstSceneScreenOptions }} />
+      <Tabs.Screen name="home" component={HomeScene} options={homeSceneOptions} />
       <Tabs.Screen name="walletsTab" component={EdgeWalletsTabScreen} />
       <Tabs.Screen name="buyTab" component={EdgeBuyTabScreen} />
       <Tabs.Screen name="sellTab" component={EdgeSellTabScreen} />
@@ -792,7 +794,7 @@ const EdgeAppStack = () => {
 const EdgeApp = () => {
   return (
     <Drawer.Navigator
-      drawerContent={props => SideMenu(props)}
+      drawerContent={SideMenu}
       initialRouteName="edgeAppStack"
       screenOptions={{
         drawerPosition: 'right',

src/components/common/SceneWrapper.tsx

@@ -319,6 +319,7 @@ interface SceneWrapperScrollViewProps extends Pick<SceneWrapperProps, 'keyboardS
 }
 
 function SceneWrapperScrollViewComponent(props: SceneWrapperScrollViewProps) {
+  console.log('SceneWrapperScrollViewComponent')
   const { children, keyboardAwareStyle, insetStyle, layoutStyle } = props
   const { keyboardShouldPersistTaps, padding = 0 } = props
 

src/components/scenes/CoinRankingScene.tsx

@@ -93,6 +93,7 @@ const assetSubTextStrings: { [pc: string]: string } = {
 
 type Timeout = ReturnType<typeof setTimeout>
 const CoinRankingComponent = (props: Props) => {
+  console.log('CoinRankingComponent')
   const theme = useTheme()
   const styles = getStyles(theme)
   const { navigation } = props

src/components/scenes/GuiPluginListScene.tsx

@@ -583,12 +583,13 @@ const getStyles = cacheStyles((theme: Theme) => ({
 }))
 
 export const GuiPluginListScene = React.memo((props: OwnProps) => {
+  console.log('Rendering GuiPluginListScene')
   const { navigation, route } = props
   const { params = { forcedWalletResult: undefined } } = route
   const dispatch = useDispatch()
   const theme = useTheme()
 
-  const handleScroll = useSceneScrollHandler()
+  // const handleScroll = useSceneScrollHandler()
   const account = useSelector(state => state.core.account)
   const accountPlugins = useSelector(state => state.account.referralCache.accountPlugins)
   const accountReferral = useSelector(state => state.account.accountReferral)
@@ -597,7 +598,6 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => {
   const { countryCode, defaultIsoFiat, developerModeOn, stateProvinceCode } = useSelector(state => state.ui.settings)
   const direction = props.route.name === 'pluginListSell' ? 'sell' : 'buy'
   const disablePlugins = useSelector(state => state.ui.exchangeInfo[direction].disablePlugins)
-  const isFocused = useIsFocused()
 
   const debouncedNavigation = useAsyncNavigation(navigation)
 
@@ -631,7 +631,7 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => {
 
   React.useEffect(() => {
     // HACK: Latest React Navigation causes multiple mounts
-    if (!isFocused) return
+    if (!navigation.isFocused) return
 
     dispatch(checkAndSetRegion({ account, countryCode, stateProvinceCode }))
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -657,7 +657,7 @@ export const GuiPluginListScene = React.memo((props: OwnProps) => {
               deviceId={deviceId}
               disablePlugins={disablePlugins}
               forcedWalletResult={forcedWalletResultLocal}
-              onScroll={handleScroll}
+              // onScroll={handleScroll}
               insetStyle={insetStyle}
               navigation={debouncedNavigation}
               route={route}

src/components/scenes/HomeScene.tsx

@@ -11,7 +11,6 @@ import { ENV } from '../../env'
 import { useAsyncEffect } from '../../hooks/useAsyncEffect'
 import { useHandler } from '../../hooks/useHandler'
 import { lstrings } from '../../locales/strings'
-import { useSceneScrollHandler } from '../../state/SceneScrollState'
 import { config } from '../../theme/appConfig'
 import { EdgeTabsSceneProps, NavigationBase } from '../../types/routerTypes'
 import { getUi4ImageUri } from '../../util/CdnUris'
@@ -57,7 +56,8 @@ export const filterContentPosts = (contentPosts?: ContentPost[], countryCode?: s
   })
 }
 
-export const HomeScene = (props: Props) => {
+export const HomeSceneComponent = (props: Props) => {
+  console.log('HomeScene')
   const { navigation } = props
   const theme = useTheme()
   const styles = getStyles(theme)
@@ -90,7 +90,7 @@ export const HomeScene = (props: Props) => {
   const handleViewAssetsPress = useHandler(() => {
     navigation.navigate('edgeTabs', { screen: 'walletsTab', params: { screen: 'walletList' } })
   })
-  const handleScroll = useSceneScrollHandler()
+  // const handleScroll = useSceneScrollHandler()
 
   // Set countryCode once
   useAsyncEffect(
@@ -130,7 +130,6 @@ export const HomeScene = (props: Props) => {
         <>
           <AccountSyncBar />
           <Animated.ScrollView
-            onScroll={handleScroll}
             style={undoInsetStyle}
             contentContainerStyle={[{ ...insetStyle, paddingBottom: insetStyle.paddingBottom }]}
             scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}
@@ -234,6 +233,12 @@ export const HomeScene = (props: Props) => {
   )
 }
 
+const MemoizedHomeScene = React.memo(HomeSceneComponent)
+
+export const HomeScene = (props: Props) => {
+  return <MemoizedHomeScene {...props} />
+}
+
 const getStyles = cacheStyles((theme: Theme) => ({
   backroundImageContainer: {
     alignItems: 'flex-start',

src/components/scenes/WalletListScene.tsx

@@ -27,6 +27,7 @@ import { WalletListSwipeable } from '../themed/WalletListSwipeable'
 interface Props extends WalletsTabSceneProps<'walletList'> {}
 
 export function WalletListScene(props: Props) {
+  console.log('WalletListScene')
   const { navigation } = props
   const theme = useTheme()
   const styles = getStyles(theme)

src/components/themed/SideMenu.tsx

@@ -44,7 +44,8 @@ import { EdgeText } from './EdgeText'
 const footerGradientStart = { x: 0, y: 0 }
 const footerGradientEnd = { x: 0, y: 0.75 }
 
-export function SideMenu(props: DrawerContentComponentProps) {
+const SideMenuComponent = (props: DrawerContentComponentProps) => {
+  console.log('SideMenu')
   // Fix this type assertion (seems like DrawerContentComponentProps works just
   // fine as NavigationBase?)
   const { navigation } = props as any as DrawerSceneProps<'edgeAppStack'>
@@ -385,6 +386,15 @@ export function SideMenu(props: DrawerContentComponentProps) {
   )
 }
 
+// Only check navigation prop for changes since we don't use state or descriptors and those ALWAYS change
+const checkProps = (prevProps: DrawerContentComponentProps, nextProps: DrawerContentComponentProps) => nextProps.navigation === prevProps.navigation
+
+const MemoizedSideMenu = React.memo(SideMenuComponent, checkProps)
+
+export const SideMenu = (props: DrawerContentComponentProps) => {
+  return <MemoizedSideMenu {...props} />
+}
+
 /**
  * Given a list of users from the core,
  * remove the given user, then organize the 3 most recent users,

src/components/themed/WalletListSwipeable.tsx

@@ -53,6 +53,7 @@ function WalletListSwipeableComponent(props: Props) {
     onRefresh,
     onReset
   } = props
+  console.log('WalletListSwipeableComponent')
 
   // Subscriptions:
   const theme = useTheme()
@@ -129,7 +130,7 @@ function WalletListSwipeableComponent(props: Props) {
 
   const data = React.useMemo(() => [...searchedWalletList, ...createWalletList], [searchedWalletList, createWalletList])
 
-  const handleScroll = useSceneScrollHandler()
+  // const handleScroll = useSceneScrollHandler()
 
   const contentContainerStyle = useMemo(() => {
     return {
@@ -150,7 +151,7 @@ function WalletListSwipeableComponent(props: Props) {
       ListHeaderComponent={header}
       refreshControl={refreshControl}
       renderItem={renderRow}
-      onScroll={handleScroll}
+      // onScroll={handleScroll}
       scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}
     />
   )