Wrap all imperative calls into useEffect

weltenwort · weltenwort · commit 8f7f34bc8b3b · 2019-12-03T14:03:05.000+01:00
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/with_stream_items.ts b/x-pack/legacy/plugins/infra/public/containers/logs/with_stream_items.ts
@@ -52,9 +52,6 @@ export const WithStreamItems = withStreamItems(
     >;
     initializeOnMount: boolean;
   }) => {
-    const [shouldInitialize, setShouldInitialize] = useState(
-      initializeOnMount && !props.isReloading && !props.isLoadingMore
-    );
     const { currentHighlightKey, logEntryHighlightsById } = useContext(LogHighlightsState.Context);
     const items = useMemo(
       () =>
@@ -73,10 +70,16 @@ export const WithStreamItems = withStreamItems(
       ]
     );
 
-    if (shouldInitialize) {
-      setShouldInitialize(false);
-      props.reloadEntries();
-    }
+    const [shouldInitialize, setShouldInitialize] = useState(
+      initializeOnMount && !props.isReloading && !props.isLoadingMore
+    );
+
+    useEffect(() => {
+      if (shouldInitialize) {
+        setShouldInitialize(false);
+        props.reloadEntries();
+      }
+    }, [shouldInitialize, props]);
 
     return children({
       ...props,
diff --git a/x-pack/legacy/plugins/infra/public/utils/use_url_state.ts b/x-pack/legacy/plugins/infra/public/utils/use_url_state.ts
@@ -5,10 +5,10 @@
  */
 
 import { Location } from 'history';
-import { useMemo, useCallback, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { decode, encode, RisonValue } from 'rison-node';
-
 import { QueryString } from 'ui/utils/query_string';
+
 import { useHistory } from './history_context';
 
 export const useUrlState = <State>({
@@ -42,10 +42,6 @@ export const useUrlState = <State>({
     urlStateString,
   ]);
 
-  const [shouldInitialize, setShouldInitialize] = useState(
-    writeDefaultState && typeof decodedState === 'undefined'
-  );
-
   const state = useMemo(() => (typeof decodedState !== 'undefined' ? decodedState : defaultState), [
     defaultState,
     decodedState,
@@ -74,10 +70,16 @@ export const useUrlState = <State>({
     [encodeUrlState, history, urlStateKey]
   );
 
-  if (shouldInitialize) {
-    setShouldInitialize(false);
-    setState(defaultState);
-  }
+  const [shouldInitialize, setShouldInitialize] = useState(
+    writeDefaultState && typeof decodedState === 'undefined'
+  );
+
+  useEffect(() => {
+    if (shouldInitialize) {
+      setShouldInitialize(false);
+      setState(defaultState);
+    }
+  }, [shouldInitialize, setState, defaultState]);
 
   return [state, setState] as [typeof state, typeof setState];
 };
