memoize value

elastic · Jun 25, 2020 · cd8aac8 · cd8aac8
1 parent 96dcd74
commit cd8aac8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/containers/source/index.test.tsx b/x-pack/plugins/security_solution/public/common/containers/source/index.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
 
 import { useWithSource, indicesExistOrDataTemporarilyUnavailable } from '.';
 import { mockBrowserFields, mockIndexFields, mocksSource } from './mock';
@@ -17,6 +17,17 @@ jest.mock('../../utils/apollo_context', () => ({
 }));
 
 describe('Index Fields & Browser Fields', () => {
+  test('returns memoized value', async () => {
+    const { result, waitForNextUpdate, rerender } = renderHook(() => useWithSource());
+    await waitForNextUpdate();
+
+    const result1 = result.current;
+    act(() => rerender());
+    const result2 = result.current;
+
+    return expect(result1).toBe(result2);
+  });
+
   test('Index Fields', async () => {
     const { result, waitForNextUpdate } = renderHook(() => useWithSource());
 

diff --git a/x-pack/plugins/security_solution/public/common/containers/source/index.tsx b/x-pack/plugins/security_solution/public/common/containers/source/index.tsx
@@ -98,9 +98,7 @@ export const useWithSource = (sourceId = 'default', indexToAdd?: string[] | null
     return configIndex;
   }, [configIndex, indexToAdd]);
 
-  const [{ browserFields, errorMessage, indicesExist, indexPattern, loading }, setState] = useState<
-    UseWithSourceState
-  >({
+  const [state, setState] = useState<UseWithSourceState>({
     browserFields: EMPTY_BROWSER_FIELDS,
     errorMessage: null,
     indexPattern: getIndexFields(defaultIndex.join(), []),
@@ -115,7 +113,7 @@ export const useWithSource = (sourceId = 'default', indexToAdd?: string[] | null
     const abortCtrl = new AbortController();
 
     async function fetchSource() {
-      if (!isSubscribed || !apolloClient) return;
+      if (!apolloClient) return;
 
       setState((prevState) => ({ ...prevState, loading: true }));
 
@@ -133,9 +131,18 @@ export const useWithSource = (sourceId = 'default', indexToAdd?: string[] | null
             },
           },
         });
+        if (!isSubscribed) {
+          return setState((prevState) => ({
+            ...prevState,
+            loading: false,
+          }));
+        }
+
         setState({
           loading: false,
-          indicesExist: get('data.source.status.indicesExist', result),
+          indicesExist: indicesExistOrDataTemporarilyUnavailable(
+            get('data.source.status.indicesExist', result)
+          ),
           browserFields: getBrowserFields(
             defaultIndex.join(),
             get('data.source.status.indexFields', result)
@@ -147,6 +154,13 @@ export const useWithSource = (sourceId = 'default', indexToAdd?: string[] | null
           errorMessage: null,
         });
       } catch (error) {
+        if (!isSubscribed) {
+          return setState((prevState) => ({
+            ...prevState,
+            loading: false,
+          }));
+        }
+
         setState((prevState) => ({
           ...prevState,
           loading: false,
@@ -163,11 +177,5 @@ export const useWithSource = (sourceId = 'default', indexToAdd?: string[] | null
     };
   }, [apolloClient, sourceId, defaultIndex]);
 
-  return {
-    indicesExist: indicesExistOrDataTemporarilyUnavailable(indicesExist),
-    browserFields,
-    indexPattern,
-    loading,
-    errorMessage,
-  };
+  return state;
 };