Simplify component lifetime

x-pack/plugins/infra/public/components/log_stream/index.tsx

@@ -4,10 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, useCallback } from 'react';
-import { noop, isUndefined } from 'lodash';
-import usePrevious from 'react-use/lib/usePrevious';
-import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { noop } from 'lodash';
 import { euiStyled } from '../../../../observability/public';
 
 import { LogEntriesCursor } from '../../../common/http_api';
@@ -30,17 +28,15 @@ export interface LogStreamProps {
   height?: string | number;
 }
 
-export const LogStream: React.FC<LogStreamProps> = (props) => {
-  const {
-    sourceId = 'default',
-    startTimestamp,
-    endTimestamp,
-    query,
-    center,
-    highlight,
-    height = '400px',
-  } = props;
-
+export const LogStream: React.FC<LogStreamProps> = ({
+  sourceId = 'default',
+  startTimestamp,
+  endTimestamp,
+  query,
+  center,
+  highlight,
+  height = '400px',
+}) => {
   // source boilerplate
   const { services } = useKibana();
   if (!services?.http?.fetch) {
@@ -81,8 +77,6 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
   });
 
   // Derived state
-  const prevProps = usePrevious(props);
-
   const isReloading =
     isLoadingSourceConfiguration || loadingState === 'uninitialized' || loadingState === 'loading';
 
@@ -105,26 +99,13 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
   const parsedHeight = typeof height === 'number' ? `${height}px` : height;
 
   // Component lifetime
-  useDeepCompareEffect(() => {
-    const shouldReloadSourceConfiguration =
-      isUndefined(prevProps) || sourceId !== prevProps.sourceId;
-
-    const shouldReloadEntries =
-      isUndefined(prevProps) ||
-      shouldReloadSourceConfiguration ||
-      prevProps.startTimestamp !== startTimestamp ||
-      prevProps.endTimestamp !== endTimestamp ||
-      prevProps.query !== query ||
-      prevProps.center !== center;
-
-    if (shouldReloadSourceConfiguration) {
-      loadSourceConfiguration();
-    }
-
-    if (shouldReloadEntries) {
-      fetchEntries();
-    }
-  }, [prevProps, props, loadSourceConfiguration, fetchEntries]);
+  useEffect(() => {
+    loadSourceConfiguration();
+  }, [loadSourceConfiguration]);
+
+  useEffect(() => {
+    fetchEntries();
+  }, [fetchEntries]);
 
   // Pagination handler
   const handlePagination = useCallback(