From e5d067dcc433e7086845946946f632565b2d5e1c Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 16 Aug 2020 23:29:20 +0300 Subject: fix: memoize rowCount --- src/components/PollsList/PollsList.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'src/components') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index b9cf313..039639d 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useState, useMemo } from 'react'; import { WindowScroller, AutoSizer, @@ -32,15 +32,17 @@ const PollsList: React.FC = ({ polls, mutate }) => { ), [polls, mutate]); const loadMoreRows = useCallback(async () => { - setDisplayCount(previousCount => { - return _.min([polls.length, previousCount + PAGE_SIZE]) || polls.length; - }); - }, [polls]); + setDisplayCount(previousCount => previousCount + PAGE_SIZE); + }, []); const isRowLoaded = useCallback(({ index }) => { return index < displayCount - 1 || displayCount === polls.length; }, [displayCount, polls]); + const rowCount = useMemo(() => { + return _.min([displayCount, polls.length]) || polls.length; + }, [displayCount, polls.length]); + return ( {({ @@ -56,7 +58,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { {({ onRowsRendered, registerChild: ref }) => ( @@ -65,7 +67,7 @@ const PollsList: React.FC = ({ polls, mutate }) => { height={height} isScrolling={isScrolling} onScroll={onChildScroll} - rowCount={displayCount} + rowCount={rowCount} rowHeight={550} rowRenderer={rowRenderer} scrollTop={scrollTop} -- cgit v1.2.3