diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts b/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts
index a2eaf9692b913..4c4c317759bb3 100644
--- a/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts
+++ b/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts
@@ -5,4 +5,4 @@
  */
 
 export * from './log_filter_state';
-export * from './use_log_filter_url_state';
+export * from './with_log_filter_url_state';
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/use_log_filter_url_state.tsx b/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/use_log_filter_url_state.tsx
deleted file mode 100644
index f5d4dbea05f7c..0000000000000
--- a/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/use_log_filter_url_state.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { useContext, useEffect } from 'react';
-import * as rt from 'io-ts';
-import { LogFilterState } from './log_filter_state';
-import { replaceStateKeyInQueryString } from '../../../utils/url_state';
-import { useUrlState } from '../../../utils/use_url_state';
-import { getEncodeDecodeFromRT } from '../../../utils/validate_url_rt';
-
-const logFilterRT = rt.union([
-  rt.type({
-    kind: rt.literal('kuery'),
-    expression: rt.string,
-  }),
-  rt.undefined,
-]);
-type LogFilterUrlState = rt.TypeOf<typeof logFilterRT>;
-
-const LOG_FILTER_URL_STATE_KEY = 'logFilter';
-
-export const useLogFilterUrlState = () => {
-  const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
-  const [logFilterUrlState, setLogFilterUrlState] = useUrlState({
-    defaultState: filterQueryAsKuery,
-    urlStateKey: LOG_FILTER_URL_STATE_KEY,
-    writeDefaultState: true,
-    ...getEncodeDecodeFromRT(logFilterRT),
-  });
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => applyLogFilterQuery(logFilterUrlState.expression), [logFilterUrlState]);
-  useEffect(() => setLogFilterUrlState(filterQueryAsKuery), [filterQueryAsKuery]);
-  /* eslint-enable react-hooks/exhaustive-deps */
-};
-
-export const replaceLogFilterInQueryString = (expression: string) =>
-  replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
-    kind: 'kuery',
-    expression,
-  });
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/with_log_filter_url_state.tsx b/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/with_log_filter_url_state.tsx
new file mode 100644
index 0000000000000..d1da6c715cfc5
--- /dev/null
+++ b/x-pack/legacy/plugins/infra/public/containers/logs/log_filter/with_log_filter_url_state.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useContext } from 'react';
+import { LogFilterState, LogFilterStateParams } from './log_filter_state';
+import { replaceStateKeyInQueryString, UrlStateContainer } from '../../../utils/url_state';
+
+type LogFilterUrlState = LogFilterStateParams['filterQueryAsKuery'];
+
+export const WithLogFilterUrlState: React.FC = () => {
+  const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
+  return (
+    <UrlStateContainer
+      urlState={filterQueryAsKuery}
+      urlStateKey="logFilter"
+      mapToUrlState={mapToFilterQuery}
+      onChange={urlState => {
+        if (urlState) {
+          applyLogFilterQuery(urlState.expression);
+        }
+      }}
+      onInitialize={urlState => {
+        if (urlState) {
+          applyLogFilterQuery(urlState.expression);
+        }
+      }}
+    />
+  );
+};
+
+const mapToFilterQuery = (value: any): LogFilterUrlState | undefined =>
+  value?.kind === 'kuery' && typeof value.expression === 'string'
+    ? {
+        kind: value.kind,
+        expression: value.expression,
+      }
+    : undefined;
+
+export const replaceLogFilterInQueryString = (expression: string) =>
+  replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
+    kind: 'kuery',
+    expression,
+  });
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
index 0681a339efd1b..aff2a3b431067 100644
--- a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
+++ b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
@@ -15,7 +15,7 @@ import { PageContent } from '../../../components/page';
 
 import { WithSummary } from '../../../containers/logs/log_summary';
 import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
-import { LogFilterState, useLogFilterUrlState } from '../../../containers/logs/log_filter';
+import { LogFilterState } from '../../../containers/logs/log_filter';
 import {
   LogFlyout as LogFlyoutState,
   WithFlyoutOptionsUrlState,
@@ -42,9 +42,6 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
     flyoutItem,
     isLoading,
   } = useContext(LogFlyoutState.Context);
-
-  useLogFilterUrlState();
-
   const { logSummaryHighlights } = useContext(LogHighlightsState.Context);
   const { applyLogFilterQuery } = useContext(LogFilterState.Context);
   return (
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx
index 3d325cfcf8d8e..63425368b040f 100644
--- a/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx
+++ b/x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx
@@ -10,7 +10,7 @@ import { LogFlyout } from '../../../containers/logs/log_flyout';
 import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogPositionState } from '../../../containers/logs/log_position';
-import { LogFilterState } from '../../../containers/logs/log_filter';
+import { LogFilterState, WithLogFilterUrlState } from '../../../containers/logs/log_filter';
 import { LogEntriesState } from '../../../containers/logs/log_entries';
 
 import { Source } from '../../../containers/source';
@@ -19,7 +19,10 @@ const LogFilterStateProvider: React.FC = ({ children }) => {
   const { createDerivedIndexPattern } = useContext(Source.Context);
   const derivedIndexPattern = createDerivedIndexPattern('logs');
   return (
-    <LogFilterState.Provider indexPattern={derivedIndexPattern}>{children}</LogFilterState.Provider>
+    <LogFilterState.Provider indexPattern={derivedIndexPattern}>
+      <WithLogFilterUrlState />
+      {children}
+    </LogFilterState.Provider>
   );
 };
 
diff --git a/x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts b/x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts
deleted file mode 100644
index d68cef10f8c51..0000000000000
--- a/x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { fold } from 'fp-ts/lib/Either';
-import { constant, identity } from 'fp-ts/lib/function';
-import { pipe } from 'fp-ts/lib/pipeable';
-import * as rt from 'io-ts';
-
-export const getEncodeDecodeFromRT = (typeRT: rt.Type<any>) => ({
-  encodeUrlState: typeRT.encode,
-  decodeUrlState: (value: unknown) =>
-    pipe(typeRT.decode(value), fold(constant(undefined), identity)),
-});