memoize itemCount and itemData and fix header table height (#171)

testing-library · Jun 28, 2020 · 7ed7afc · 7ed7afc
1 parent 420276a
commit 7ed7afc
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/components/DomEventsTable.js b/src/components/DomEventsTable.js
@@ -159,10 +159,15 @@ const DomEventsTable = ({
     </IconButton>
   );
 
+  const [itemCount, itemData] = useMemo(() => {
+    const eventsFiltered = data.filter(filterData);
+    return [eventsFiltered.length, eventsFiltered];
+  }, [data, filterData]);
+
   return (
     <div className="editor p-4 md:h-56 flex-auto overflow-hidden">
       <div className="h-56 md:h-full w-full flex flex-col">
-        <div className="h-8 flex items-center w-full text-sm font-bold">
+        <div className="h-10 flex items-center w-full text-sm font-bold">
           <div
             className="p-2 w-16 cursor-pointer flex justify-between items-center"
             onClick={onChangeSortDirection}
@@ -214,8 +219,8 @@ const DomEventsTable = ({
                   mode={appendMode}
                   ref={listRef}
                   height={height}
-                  itemCount={data.filter(filterData).length}
-                  itemData={data.filter(filterData)}
+                  itemCount={itemCount}
+                  itemData={itemData}
                   itemSize={32}
                   width={width}
                   outerElementType={VirtualScrollable}