refactor(frontend): useCellMeasurerCache hook (cache that makes sense)

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -4,15 +4,15 @@ import BottomBlock from '../BottomBlock';
 import { Tabs, Input, Icon, NoContent } from 'UI';
 import cn from 'classnames';
 import ConsoleRow from '../ConsoleRow';
-import useLatestRef from 'App/hooks/useLatestRef'
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+import { List, CellMeasurer, AutoSizer } from 'react-virtualized';
 import { useStore } from 'App/mstore';
 import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 import { useModal } from 'App/components/Modal';
 import useAutoscroll from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
+import useCellMeasurerCache from '../useCellMeasurerCache'
 
 const ALL = 'ALL';
 const INFO = 'INFO';
@@ -101,11 +101,6 @@ function ConsolePanel() {
     timeoutStartAutoscroll()
   }
   
-  //Shouldn't it be declared outside the render function?
-  const cache = new CellMeasurerCache({
-    fixedWidth: true,
-    keyMapper: (index: number) => filteredList[index],
-  });
   const _list = useRef();
   useEffect(() => {
     if (_list.current) {
@@ -114,6 +109,7 @@ function ConsolePanel() {
     }
   }, [activeIndex]);
 
+  const cache = useCellMeasurerCache(filteredList)
 
   const showDetails = (log: any) => {
     setIsDetailsModalActive(true);

frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
-import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+import { List, CellMeasurer, AutoSizer } from 'react-virtualized';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import BottomBlock from '../BottomBlock';
 import { useModal } from 'App/components/Modal';
@@ -12,6 +12,7 @@ import StackEventRow from 'Shared/DevTools/StackEventRow';
 import StackEventModal from '../StackEventModal';
 import useAutoscroll from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
+import useCellMeasurerCache from '../useCellMeasurerCache'
 
 const INDEX_KEY = 'stackEvent';
 const ALL = 'ALL';
@@ -57,10 +58,7 @@ function StackEventPanel() {
     timeoutStartAutoscroll()
   }
 
-  const cache = new CellMeasurerCache({
+  const cache = useCellMeasurerCache(filteredList)
-    fixedWidth: true,
-    keyMapper: (index: number) => filteredList[index],
-  });
 
   const showDetails = (item: any) => {
     setIsDetailsModalActive(true)

frontend/app/components/shared/DevTools/useCellMeasurerCache.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import { CellMeasurerCache } from 'react-virtualized';
+import useLatestRef from 'App/hooks/useLatestRef'
+
+
+export default function useCellMeasurerCache(itemList: any[]) {
+	const filteredListRef = useLatestRef(itemList)
+  return useMemo(() => new CellMeasurerCache({
+    fixedWidth: true,
+    keyMapper: (index) => filteredListRef.current[index],
+  }), [])
+}