WIP

Author: Jon-edge

src/components/scenes/CoinRankingScene.tsx

@@ -6,6 +6,8 @@ import { checkEnabledExchanges } from '../../actions/SettingsActions'
 import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings'
 import { useAbortable } from '../../hooks/useAbortable'
 import { useHandler } from '../../hooks/useHandler'
+import { useMount } from '../../hooks/useMount'
+import { useUnmount } from '../../hooks/useUnmount'
 import { lstrings } from '../../locales/strings'
 import { getCoingeckoFiat } from '../../selectors/SettingsSelectors'
 import { FooterRender } from '../../state/SceneFooterState'
@@ -142,24 +144,27 @@ const CoinRankingComponent = (props: Props) => {
     setFooterHeight(height)
   })
 
-  React.useEffect(() => {
-    if (lastSceneFiat !== coingeckoFiat) {
+  useMount(() => {
+    console.debug('useMount')
+    if (lastSceneFiat == null) {
+      lastSceneFiat = coingeckoFiat
+    } else if (lastSceneFiat !== coingeckoFiat) {
       // Clear cache if we changed the fiat while outside of this scene
       debugLog(LOG_COINRANK, 'Clearing coinRankingDatas cache')
       coinRanking.coinRankingDatas = []
       lastStartIndex.current = 1
       setDataSize(0)
       setRequestDataSize(QUERY_PAGE_SIZE)
     }
+  })
 
-    return () => {
-      mounted.current = false
+  useUnmount(() => {
+    console.debug('useUnmount')
+    mounted.current = false
 
-      // Queries should update this, but just in case:
-      lastSceneFiat = coingeckoFiat
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    // Queries should update this, but just in case:
+    lastSceneFiat = coingeckoFiat
+  })
 
   React.useEffect(() => {
     return navigation.addListener('focus', () => {
@@ -170,7 +175,7 @@ const CoinRankingComponent = (props: Props) => {
   // Start querying starting from either the last fetched index (scrolling) or
   // the first index (initial load/timed refresh)
   const queryLoop = useAbortable(maybeAbort => async (startIndex: number) => {
-    debugLog(LOG_COINRANK, `queryLoop(start: ${startIndex})`)
+    debugLog(LOG_COINRANK, `queryLoop(start: ${startIndex}, size: ${requestDataSize})`)
 
     try {
       // Catch up to the total required items. Always fetch if requesting the
@@ -228,7 +233,8 @@ const CoinRankingComponent = (props: Props) => {
     }
 
     return () => {
-      // Reset related query state when this effect is unmounted (coingeckoFiat
+      console.debug('queryLoop cleanup, mounted.current: ', mounted.current)
+      // Reset related query state when this effect is cleaned up (coingeckoFiat
       // changed), but the scene is still mounted:
       if (mounted.current) {
         debugLog(LOG_COINRANK, `Clearing coinRankingDatas cache for new fiat: ${coingeckoFiat}`)
@@ -241,7 +247,6 @@ const CoinRankingComponent = (props: Props) => {
         setRequestDataSize(QUERY_PAGE_SIZE)
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [coingeckoFiat /* reset subscription on fiat change */, queryLoop])
 
   const listData: number[] = React.useMemo(() => {

src/util/logger.ts

@@ -200,7 +200,7 @@ export const LOG_COINRANK = 0x0001
 export const debugLog = (type: number, ...args: any): void => {
   // Provides date formatting for the form '01-14 03:43:56.273'
   const dateTime = new Date().toISOString().slice(5, 23).replace('T', ' ')
-  if (type & debugLogType) console.log(dateTime, ...args)
+  console.debug(dateTime, ...args)
 }
 
 export const enableDebugLogType = (type: number) => (debugLogType |= type)