refactor: 💡 memoize persistedLog in more idiomatic way

elastic · Oct 29, 2019 · b0f9b00 · b0f9b00
1 parent 71743d3
commit b0f9b00
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
@@ -77,17 +77,15 @@ function QueryBarTopRowUI(props: Props) {
 
   const kueryQuerySyntaxLink: string = docLinks!.links.query.kueryQuerySyntax;
 
-  const queryLanguage = props.query && props.query.language;
-  const persistedLog = React.useRef<PersistedLog | undefined>(undefined);
-
-  useEffect(() => {
-    if (!props.query) return;
-    persistedLog.current = getQueryLog(uiSettings!, store, appName, props.query.language);
-  }, [queryLanguage]);
+  const persistedLog: PersistedLog | undefined = React.useMemo(
+    () =>
+      props.query ? getQueryLog(uiSettings!, store, appName, props.query.language) : undefined,
+    [props.query]
+  );
 
   function onClickSubmitButton(event: React.MouseEvent<HTMLButtonElement>) {
-    if (persistedLog.current && props.query) {
-      persistedLog.current.add(props.query.query);
+    if (persistedLog && props.query) {
+      persistedLog.add(props.query.query);
     }
     event.preventDefault();
     onSubmit({ query: props.query, dateRange: getDateRange() });
@@ -184,7 +182,7 @@ function QueryBarTopRowUI(props: Props) {
           screenTitle={props.screenTitle}
           onChange={onQueryChange}
           onSubmit={onInputSubmit}
-          persistedLog={persistedLog.current}
+          persistedLog={persistedLog}
         />
       </EuiFlexItem>
     );