From 73ed7efbe601bdb263ae4ae5437e33fe313f7ecd Mon Sep 17 00:00:00 2001
From: Roman Komarov <kizmarh@ya.ru>
Date: Fri, 21 Feb 2020 15:04:41 +0100
Subject: [PATCH] useTable: Fixes memoizing of headerGroups (#1920)

Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com>
---
 src/hooks/useTable.js | 66 ++++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js
index 639ec7d..18f2924 100755
--- a/src/hooks/useTable.js
+++ b/src/hooks/useTable.js
@@ -380,40 +380,42 @@ export const useTable = (props, ...plugins) => {
     }
   )
 
-  getInstance().headerGroups = getInstance().headerGroups.filter(
-    (headerGroup, i) => {
-      // Filter out any headers and headerGroups that don't have visible columns
-      headerGroup.headers = headerGroup.headers.filter(column => {
-        const recurse = headers =>
-          headers.filter(column => {
-            if (column.headers) {
-              return recurse(column.headers)
-            }
-            return column.isVisible
-          }).length
-        if (column.headers) {
-          return recurse(column.headers)
+  getInstance().headerGroups = React.useMemo(
+    () =>
+      headerGroups.filter((headerGroup, i) => {
+        // Filter out any headers and headerGroups that don't have visible columns
+        headerGroup.headers = headerGroup.headers.filter(column => {
+          const recurse = headers =>
+            headers.filter(column => {
+              if (column.headers) {
+                return recurse(column.headers)
+              }
+              return column.isVisible
+            }).length
+          if (column.headers) {
+            return recurse(column.headers)
+          }
+          return column.isVisible
+        })
+
+        // Give headerGroups getRowProps
+        if (headerGroup.headers.length) {
+          headerGroup.getHeaderGroupProps = makePropGetter(
+            getHooks().getHeaderGroupProps,
+            { instance: getInstance(), headerGroup, index: i }
+          )
+
+          headerGroup.getFooterGroupProps = makePropGetter(
+            getHooks().getFooterGroupProps,
+            { instance: getInstance(), headerGroup, index: i }
+          )
+
+          return true
         }
-        return column.isVisible
-      })
 
-      // Give headerGroups getRowProps
-      if (headerGroup.headers.length) {
-        headerGroup.getHeaderGroupProps = makePropGetter(
-          getHooks().getHeaderGroupProps,
-          { instance: getInstance(), headerGroup, index: i }
-        )
-
-        headerGroup.getFooterGroupProps = makePropGetter(
-          getHooks().getFooterGroupProps,
-          { instance: getInstance(), headerGroup, index: i }
-        )
-
-        return true
-      }
-
-      return false
-    }
+        return false
+      }),
+    [headerGroups, getInstance, getHooks]
   )
 
   getInstance().footerGroups = [...getInstance().headerGroups].reverse()