Make some data fetching hooks state updates atomic (#132069) (#132143)

(cherry picked from commit 56dedf3) Co-authored-by: Kevin Qualters <[email protected]>
elastic · May 12, 2022 · a1743f9 · a1743f9
1 parent 9c72255
commit a1743f9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
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
@@ -8,6 +8,7 @@
 import { isEmpty, isEqual, isUndefined, keyBy, pick } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import type { DataViewBase } from '@kbn/es-query';
 import { Subscription } from 'rxjs';
 
@@ -23,6 +24,7 @@ import {
 import { isCompleteResponse, isErrorResponse } from '../../../../../../../src/plugins/data/common';
 import * as i18n from './translations';
 import { useAppToasts } from '../../hooks/use_app_toasts';
+import { getDataViewStateFromIndexFields } from './use_data_view';
 
 export type { BrowserField, BrowserFields, DocValueFields };
 
@@ -155,19 +157,27 @@ export const useFetchIndex = (
           .subscribe({
             next: (response) => {
               if (isCompleteResponse(response)) {
-                const stringifyIndices = response.indicesExist.sort().join();
-
-                previousIndexesName.current = response.indicesExist;
-                setLoading(false);
-                setState({
-                  browserFields: getBrowserFields(stringifyIndices, response.indexFields),
-                  docValueFields: getDocValueFields(stringifyIndices, response.indexFields),
-                  indexes: response.indicesExist,
-                  indexExists: response.indicesExist.length > 0,
-                  indexPatterns: getIndexFields(stringifyIndices, response.indexFields),
+                Promise.resolve().then(() => {
+                  ReactDOM.unstable_batchedUpdates(() => {
+                    const stringifyIndices = response.indicesExist.sort().join();
+
+                    previousIndexesName.current = response.indicesExist;
+                    const { browserFields, docValueFields } = getDataViewStateFromIndexFields(
+                      stringifyIndices,
+                      response.indexFields
+                    );
+                    setLoading(false);
+                    setState({
+                      browserFields,
+                      docValueFields,
+                      indexes: response.indicesExist,
+                      indexExists: response.indicesExist.length > 0,
+                      indexPatterns: getIndexFields(stringifyIndices, response.indexFields),
+                    });
+
+                    searchSubscription$.current.unsubscribe();
+                  });
                 });
-
-                searchSubscription$.current.unsubscribe();
               } else if (isErrorResponse(response)) {
                 setLoading(false);
                 addWarning(i18n.ERROR_BEAT_FIELDS);

diff --git a/x-pack/plugins/security_solution/public/common/containers/source/use_data_view.tsx b/x-pack/plugins/security_solution/public/common/containers/source/use_data_view.tsx
@@ -51,7 +51,7 @@ interface DataViewInfo {
  * HOT Code path where the fields can be 16087 in length or larger. This is
  * VERY mutatious on purpose to improve the performance of the transform.
  */
-const getDataViewStateFromIndexFields = memoizeOne(
+export const getDataViewStateFromIndexFields = memoizeOne(
   (_title: string, fields: IndexField[]): DataViewInfo => {
     // Adds two dangerous casts to allow for mutations within this function
     type DangerCastForMutation = Record<string, {}>;

diff --git a/x-pack/plugins/security_solution/public/timelines/containers/details/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/details/index.tsx
@@ -7,6 +7,7 @@
 
 import { isEmpty } from 'lodash/fp';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import deepEqual from 'fast-deep-equal';
 import { Subscription } from 'rxjs';
 
@@ -90,11 +91,15 @@ export const useTimelineEventsDetails = ({
           .subscribe({
             next: (response) => {
               if (isCompleteResponse(response)) {
-                setLoading(false);
-                setTimelineDetailsResponse(response.data || []);
-                setRawEventData(response.rawResponse.hits.hits[0]);
-                setEcsData(response.ecs || null);
-                searchSubscription$.current.unsubscribe();
+                Promise.resolve().then(() => {
+                  ReactDOM.unstable_batchedUpdates(() => {
+                    setLoading(false);
+                    setTimelineDetailsResponse(response.data || []);
+                    setRawEventData(response.rawResponse.hits.hits[0]);
+                    setEcsData(response.ecs || null);
+                    searchSubscription$.current.unsubscribe();
+                  });
+                });
               } else if (isErrorResponse(response)) {
                 setLoading(false);
                 addWarning(i18n.FAIL_TIMELINE_DETAILS);