aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/PollCard/PollCard.tsx4
-rw-r--r--src/components/PollsList/PollsList.tsx45
-rw-r--r--src/components/PollsList/RenderItem.tsx46
3 files changed, 62 insertions, 33 deletions
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index a4c2144..749c6b7 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-const PollCard: React.FC<PropTypes> = ({ poll, setPoll }) => {
+const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
const classes = useStyles();
const { author, contents: { left, right }, vote } = poll;
const { enqueueSnackbar } = useSnackbar();
@@ -114,6 +114,6 @@ const PollCard: React.FC<PropTypes> = ({ poll, setPoll }) => {
</div>
</Card>
);
-};
+});
export default PollCard;
diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index c95bfde..41f9966 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -1,41 +1,24 @@
-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}
+ _key={key}
+ />
+ ), [polls, mutate]);
return (
<WindowScroller>
@@ -56,11 +39,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>
)}
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
new file mode 100644
index 0000000..5123bca
--- /dev/null
+++ b/src/components/PollsList/RenderItem.tsx
@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Poll } from 'which-types';
+import PollCard from '../PollCard/PollCard';
+
+
+interface PropTypes {
+ polls: Poll[];
+ mutate: (polls: Poll[], refetch: boolean) => void;
+ index: number;
+ style: React.CSSProperties;
+ _key: string; // https://reactjs.org/warnings/special-props.html
+}
+
+const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
+ if (oldProps._key !== newProps._key) return false;
+ if (oldProps.index !== newProps.index) return false;
+ if (oldProps.polls !== newProps.polls) return false;
+ // TODO: uncomment line below to listen to style updates
+ // if (JSON.stringify(oldProps.style)!== JSON.stringify(newProps.style)) return false;
+ return true;
+};
+
+const RenderItem: React.FC<PropTypes> = React.memo(({
+ polls, mutate, index, style, _key
+}) => {
+ const poll = polls[index];
+
+ const setPoll = useCallback((newPoll: Poll) => {
+ const newPolls = [...polls];
+ newPolls[index] = newPoll;
+
+ // Force-update list-size so everything re-renders
+ mutate([], false);
+ mutate(newPolls, false);
+ }, [mutate, index, polls]);
+
+ return (
+ <div key={_key} style={style}>
+ <PollCard poll={poll} setPoll={setPoll} />
+ </div>
+ );
+}, compareProps);
+
+
+export default RenderItem;
+