[Search] Fix search index rerendering unnecessarily (elastic#186412)

## Summary

This fixes the search index rerendering on every change, even if nothing
actually changed.

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/search_index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { useParams } from 'react-router-dom';
 
@@ -15,12 +15,15 @@ import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
+import { ClientConfigType } from '../../../../../common/types';
+
 import { generateEncodedPath } from '../../../shared/encode_path_params';
 import { ErrorStatePrompt } from '../../../shared/error_state';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana';
 import { SEARCH_INDEX_PATH, SEARCH_INDEX_TAB_PATH } from '../../routes';
 
+import { ElasticsearchViewIndex } from '../../types';
 import { isConnectorIndex, isCrawlerIndex } from '../../utils/indices';
 import { ConnectorConfiguration } from '../connector_detail/connector_configuration';
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
@@ -223,20 +226,6 @@ export const SearchIndex: React.FC = () => {
     ...(hasDefaultIngestPipeline ? [PIPELINES_TAB] : []),
   ];
 
-  const selectedTab = tabs.find((tab) => tab.id === tabId);
-
-  const onTabClick = (tab: EuiTabbedContentTab) => {
-    KibanaLogic.values.navigateToUrl(
-      generateEncodedPath(
-        tab.id === SearchIndexTabId.OVERVIEW ? SEARCH_INDEX_PATH : SEARCH_INDEX_TAB_PATH,
-        {
-          indexName,
-          tabId: tab.id,
-        }
-      )
-    );
-  };
-
   return (
     <EnterpriseSearchContentPageTemplate
       pageChrome={[...baseBreadcrumbs, indexName]}
@@ -250,18 +239,56 @@ export const SearchIndex: React.FC = () => {
         rightSideItems: getHeaderActions(index),
       }}
     >
-      {isCrawlerIndex(index) && !index.connector ? (
-        <NoConnectorRecord />
-      ) : isCrawlerIndex(index) && (Boolean(errorConnectingMessage) || !config.host) ? (
-        <ErrorStatePrompt />
-      ) : (
-        <>
-          {indexName === index?.name && (
-            <EuiTabbedContent tabs={tabs} selectedTab={selectedTab} onTabClick={onTabClick} />
-          )}
-          {isCrawlerIndex(index) && <CrawlCustomSettingsFlyout />}
-        </>
-      )}
+      <Content
+        index={index}
+        errorConnectingMessage={errorConnectingMessage}
+        config={config}
+        tabs={tabs}
+        tabId={tabId}
+      />
     </EnterpriseSearchContentPageTemplate>
   );
 };
+
+interface ContentProps {
+  config?: ClientConfigType;
+  errorConnectingMessage: string;
+  index?: ElasticsearchViewIndex;
+  tabId?: string;
+  tabs: EuiTabbedContentTab[];
+}
+
+const Content: React.FC<ContentProps> = ({
+  config,
+  errorConnectingMessage,
+  index,
+  tabs,
+  tabId,
+}) => {
+  const selectedTab = useMemo(() => tabs.find((tab) => tab.id === tabId), [tabId]);
+
+  const onTabClick = (tab: EuiTabbedContentTab) => {
+    KibanaLogic.values.navigateToUrl(
+      generateEncodedPath(
+        tab.id === SearchIndexTabId.OVERVIEW ? SEARCH_INDEX_PATH : SEARCH_INDEX_TAB_PATH,
+        {
+          indexName: index?.name || '',
+          tabId: tab.id,
+        }
+      )
+    );
+  };
+
+  if (isCrawlerIndex(index) && !index.connector) {
+    return <NoConnectorRecord />;
+  }
+  if (isCrawlerIndex(index) && (Boolean(errorConnectingMessage) || !config?.host)) {
+    return <ErrorStatePrompt />;
+  }
+  return (
+    <>
+      <EuiTabbedContent tabs={tabs} selectedTab={selectedTab} onTabClick={onTabClick} />
+      {isCrawlerIndex(index) && <CrawlCustomSettingsFlyout />}
+    </>
+  );
+};