[Performance] Fix FlatList memoization

#126
devhubapp · Jul 12, 2019 · 8abc84b · 8abc84b
1 parent d9d649b
commit 8abc84b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/packages/components/src/components/cards/EventCards.tsx b/packages/components/src/components/cards/EventCards.tsx
@@ -52,6 +52,8 @@ function keyExtractor(item: EnhancedGitHubEvent, _index: number) {
   return `event-card-${item.id}`
 }
 
+const stickyHeaderIndices = [0]
+
 export const EventCards = React.memo((props: EventCardsProps) => {
   const {
     cardViewMode,
@@ -180,9 +182,9 @@ export const EventCards = React.memo((props: EventCardsProps) => {
           enableCompactLabels={enableCompactLabels}
           event={item}
           isFocused={
+            !disableItemFocus &&
             column.id === focusedColumnId &&
-            item.id === selectedItemIdRef.current &&
-            !disableItemFocus
+            item.id === selectedItemIdRef.current
           }
           repoIsKnown={props.repoIsKnown}
           swipeable={props.swipeable}
@@ -193,7 +195,9 @@ export const EventCards = React.memo((props: EventCardsProps) => {
 
   const renderItem = useCallback(_renderItem, [
     cardViewMode,
-    column.id === focusedColumnId && selectedItemIdRef.current,
+    !disableItemFocus &&
+      column.id === focusedColumnId &&
+      selectedItemIdRef.current,
     enableCompactLabels,
     props.swipeable,
     props.repoIsKnown,
@@ -348,7 +352,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
     )
   }
 
-  function renderEmptyComponent() {
+  const renderEmptyComponent = useCallback(() => {
     return (
       <EmptyCards
         column={column}
@@ -359,7 +363,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
         refresh={refresh}
       />
     )
-  }
+  }, [column, errorMessage, fetchNextPage, loadState, refresh])
 
   return (
     <FlatList
@@ -384,7 +388,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
       refreshControl={refreshControl}
       removeClippedSubviews
       renderItem={renderItem}
-      stickyHeaderIndices={[0]}
+      stickyHeaderIndices={stickyHeaderIndices}
       viewabilityConfig={viewabilityConfig}
       windowSize={2}
     />

diff --git a/packages/components/src/components/cards/IssueOrPullRequestCards.tsx b/packages/components/src/components/cards/IssueOrPullRequestCards.tsx
@@ -60,6 +60,8 @@ function keyExtractor(item: EnhancedGitHubIssueOrPullRequest) {
   return `issue-or-pr-card-${item.id}`
 }
 
+const stickyHeaderIndices = [0]
+
 export const IssueOrPullRequestCards = React.memo(
   (props: IssueOrPullRequestCardsProps) => {
     const {
@@ -196,9 +198,9 @@ export const IssueOrPullRequestCards = React.memo(
             cardViewMode={cardViewMode}
             enableCompactLabels={enableCompactLabels}
             isFocused={
+              !disableItemFocus &&
               column.id === focusedColumnId &&
-              item.id === selectedItemIdRef.current &&
-              !disableItemFocus
+              item.id === selectedItemIdRef.current
             }
             issueOrPullRequest={item}
             repoIsKnown={props.repoIsKnown}
@@ -210,7 +212,9 @@ export const IssueOrPullRequestCards = React.memo(
     }
     const renderItem = useCallback(_renderItem, [
       cardViewMode,
-      column.id === focusedColumnId && selectedItemIdRef.current,
+      !disableItemFocus &&
+        column.id === focusedColumnId &&
+        selectedItemIdRef.current,
       enableCompactLabels,
       props.repoIsKnown,
       props.swipeable,
@@ -350,7 +354,7 @@ export const IssueOrPullRequestCards = React.memo(
       )
     }
 
-    function renderEmptyComponent() {
+    const renderEmptyComponent = useCallback(() => {
       const maybeInvalidFilters = `${errorMessage || ''}`
         .toLowerCase()
         .startsWith('validation failed')
@@ -410,7 +414,14 @@ export const IssueOrPullRequestCards = React.memo(
           refresh={refresh}
         />
       )
-    }
+    }, [
+      column,
+      errorMessage,
+      fetchNextPage,
+      loadState,
+      refresh,
+      loggedUsername,
+    ])
 
     return (
       <FlatList
@@ -436,7 +447,7 @@ export const IssueOrPullRequestCards = React.memo(
         refreshControl={refreshControl}
         removeClippedSubviews
         renderItem={renderItem}
-        stickyHeaderIndices={[0]}
+        stickyHeaderIndices={stickyHeaderIndices}
         viewabilityConfig={viewabilityConfig}
         windowSize={2}
       />

diff --git a/packages/components/src/components/cards/NotificationCards.tsx b/packages/components/src/components/cards/NotificationCards.tsx
@@ -51,6 +51,8 @@ function keyExtractor(item: EnhancedGitHubNotification) {
   return `notification-card-${item.id}`
 }
 
+const stickyHeaderIndices = [0]
+
 export const NotificationCards = React.memo((props: NotificationCardsProps) => {
   const {
     cardViewMode,
@@ -177,9 +179,9 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
           cardViewMode={cardViewMode}
           enableCompactLabels={enableCompactLabels}
           isFocused={
+            !disableItemFocus &&
             column.id === focusedColumnId &&
-            item.id === selectedItemIdRef.current &&
-            !disableItemFocus
+            item.id === selectedItemIdRef.current
           }
           notification={item}
           repoIsKnown={props.repoIsKnown}
@@ -190,7 +192,9 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
   }
   const renderItem = useCallback(_renderItem, [
     cardViewMode,
-    column.id === focusedColumnId && selectedItemIdRef.current,
+    !disableItemFocus &&
+      column.id === focusedColumnId &&
+      selectedItemIdRef.current,
     enableCompactLabels,
     props.repoIsKnown,
     props.swipeable,
@@ -322,7 +326,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
     )
   }
 
-  function renderEmptyComponent() {
+  const renderEmptyComponent = useCallback(() => {
     return (
       <EmptyCards
         clearMessage="No new notifications!"
@@ -334,7 +338,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
         refresh={refresh}
       />
     )
-  }
+  }, [column, errorMessage, fetchNextPage, loadState, refresh])
 
   return (
     <FlatList
@@ -360,7 +364,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
       refreshControl={refreshControl}
       removeClippedSubviews
       renderItem={renderItem}
-      stickyHeaderIndices={[0]}
+      stickyHeaderIndices={stickyHeaderIndices}
       viewabilityConfig={viewabilityConfig}
       windowSize={2}
     />

diff --git a/packages/components/src/libs/flatlist/index.tsx b/packages/components/src/libs/flatlist/index.tsx
@@ -6,7 +6,7 @@ import { CrossPlatformFlatList, CrossPlatformFlatListProps } from './types'
 export interface FlatListProps<ItemT>
   extends CrossPlatformFlatListProps<ItemT> {}
 
-export class FlatList<ItemT> extends React.Component<FlatListProps<ItemT>>
+export class FlatList<ItemT> extends React.PureComponent<FlatListProps<ItemT>>
   implements CrossPlatformFlatList<ItemT> {
   ref = React.createRef<CrossPlatformFlatList<ItemT>>()
 

diff --git a/packages/components/src/libs/flatlist/index.web.tsx b/packages/components/src/libs/flatlist/index.web.tsx
@@ -17,7 +17,7 @@ export interface FlatListProps<ItemT>
   keyExtractor: (item: ItemT, index: number) => string
 }
 
-export class FlatList<ItemT> extends React.Component<FlatListProps<ItemT>>
+export class FlatList<ItemT> extends React.PureComponent<FlatListProps<ItemT>>
   implements CrossPlatformFlatList<ItemT> {
   static displayName = 'FlatList (react-window)'