perf: greatly bost PollsList performance :rocket:

Get rid of unnesessary re-renders of the whole list on scroll.

1 files changed, 13 insertions, 31 deletions

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index c95bfde..62273ef 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,41 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Poll } from 'which-types';
 import { WindowScroller, AutoSizer, List } from 'react-virtualized';
-import PollCard from '../PollCard/PollCard';
-
+import RenderItem from './RenderItem';
 
 interface PropTypes {
   polls: Poll[];
   mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
-interface RenderPropTypes {
-  index: number;
-  key: string;
-  style: React.CSSProperties;
-}
-
-
 const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
-  const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
-    const poll = polls[index];
-
-    const setPoll = (newPoll: Poll) => {
-      const newPolls = [...polls];
-      newPolls[index] = newPoll;
-
-      // Force-update list-size so everything re-renders
-      mutate([], false);
-      mutate(newPolls, false);
-    };
-
-    return (
-      // To re-render on list resize, add this info to key
-      <div key={`${key}-${poll._id}-${polls.length}`} style={style}>
-        <PollCard poll={poll} setPoll={setPoll} />
-      </div>
-    );
-  };
+  const rowRenderer = useCallback(({ index, style, key }) => (
+    <RenderItem
+      polls={polls}
+      mutate={mutate}
+      index={index}
+      style={style}
+      key={key}
+    />
+  ), [polls, mutate]);
 
   return (
     <WindowScroller>
@@ -56,11 +38,11 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
                 onScroll={onChildScroll}
                 rowCount={polls.length}
                 rowHeight={550}
-                rowRenderer={RenderItem}
+                rowRenderer={rowRenderer}
                 scrollTop={scrollTop}
                 width={width}
                 containerStyle={{ pointerEvents: 'auto' }}
-                overscanRowCount={1}
+                overscanRowCount={2}
               />
             </div>
           )}