diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap index 37dc0d14730c0..5dc8702411783 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap @@ -349,7 +349,7 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto } } > - - - - + + @@ -1463,7 +1463,7 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1 } } > - - - - + + @@ -2574,7 +2574,7 @@ exports[`QueryBarInput Should render the given query 1`] = ` } } > - - - - + + 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 index 26ee2d80ebf65..d2953621d86d1 100644 --- 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 @@ -21,7 +21,7 @@ import dateMath from '@elastic/datemath'; import { doesKueryExpressionHaveLuceneSyntaxError } from '@kbn/es-query'; import classNames from 'classnames'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { EuiButton, @@ -78,12 +78,10 @@ function QueryBarTopRowUI(props: Props) { const kueryQuerySyntaxLink: string = docLinks!.links.query.kueryQuerySyntax; const queryLanguage = props.query && props.query.language; - let persistedLog: PersistedLog | undefined; - - useEffect(() => { - if (!props.query) return; - persistedLog = getQueryLog(uiSettings!, storage, appName, props.query.language); - }, [queryLanguage]); + const persistedLog: PersistedLog | undefined = React.useMemo( + () => (queryLanguage ? getQueryLog(uiSettings!, storage, appName, queryLanguage) : undefined), + [queryLanguage] + ); function onClickSubmitButton(event: React.MouseEvent) { if (persistedLog && props.query) { diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx index 6fd5274d09ec6..7a9786f5f9ce8 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx @@ -83,7 +83,7 @@ export const SaveQueryForm: FunctionComponent = ({ setSavedQueries(sortedAllSavedQueries); }; fetchQueries(); - }, []); + }, [savedQueryService]); const savedQueryDescriptionText = i18n.translate( 'data.search.searchBar.savedQueryDescriptionText', diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx index b2e47e8b4e850..56116e155eb2f 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx @@ -75,7 +75,7 @@ export const SavedQueryManagementComponent: FunctionComponent = ({ if (isOpen) { fetchCountAndSavedQueries(); } - }, [isOpen, activePage]); + }, [isOpen, activePage, savedQueryService]); const goToPage = (pageNumber: number) => { setActivePage(pageNumber); diff --git a/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx b/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx index 8359663610f29..c7635017caef2 100644 --- a/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx +++ b/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx @@ -57,6 +57,7 @@ export const ExpressionRendererImplementation = ({ const [state, setState] = useState({ ...defaultState }); // Re-fetch data automatically when the inputs change + /* eslint-disable react-hooks/exhaustive-deps */ useEffect(() => { if (handlerRef.current) { handlerRef.current.update(expression, options); @@ -68,6 +69,7 @@ export const ExpressionRendererImplementation = ({ options.variables, options.disableCaching, ]); + /* eslint-enable react-hooks/exhaustive-deps */ // Initialize the loader only once useEffect(() => { diff --git a/src/plugins/kibana_react/public/context/context.tsx b/src/plugins/kibana_react/public/context/context.tsx index 630348017106a..cbae5c4638ca2 100644 --- a/src/plugins/kibana_react/public/context/context.tsx +++ b/src/plugins/kibana_react/public/context/context.tsx @@ -42,11 +42,11 @@ export const useKibana = (): KibanaReactContextValue< export const withKibana = }>( type: React.ComponentType ): React.FC> => { - const enhancedType: React.FC> = (props: Omit) => { + const EnhancedType: React.FC> = (props: Omit) => { const kibana = useKibana(); return React.createElement(type, { ...props, kibana } as Props); }; - return enhancedType; + return EnhancedType; }; export const UseKibana: React.FC<{ @@ -69,7 +69,7 @@ export const createKibanaReactContext = ( const oldValue = useKibana(); const { value: newValue } = useMemo( () => createKibanaReactContext({ ...services, ...oldValue.services, ...newServices }), - Object.keys(services) + [services, oldValue, newServices] ); return createElement(context.Provider as React.ComponentType, { value: newValue, diff --git a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx index badf568ccc193..0879b0cb3f36a 100644 --- a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx +++ b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx @@ -106,7 +106,7 @@ describe('useUiSetting', () => { }); describe('useUiSetting$', () => { - const TestConsumer: React.FC<{ + const TestConsumerX: React.FC<{ setting: string; newValue?: string; }> = ({ setting, newValue = '' }) => { @@ -126,7 +126,7 @@ describe('useUiSetting$', () => { ReactDOM.render( - + , container ); @@ -143,7 +143,7 @@ describe('useUiSetting$', () => { ReactDOM.render( - + , container ); @@ -159,7 +159,7 @@ describe('useUiSetting$', () => { ReactDOM.render( - + , container ); @@ -174,7 +174,7 @@ describe('useUiSetting$', () => { ReactDOM.render( - + , container ); diff --git a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts index ddc8b2a684728..295515bfa51af 100644 --- a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts +++ b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts @@ -65,6 +65,7 @@ export const useUiSetting$ = (key: string, defaultValue?: T): [T, Setter] const observable$ = useMemo(() => services.uiSettings!.get$(key, defaultValue), [ key, defaultValue, + services.uiSettings, ]); const value = useObservable(observable$, services.uiSettings!.get(key, defaultValue)); const set = useCallback((newValue: T) => services.uiSettings!.set(key, newValue), [key]); diff --git a/src/plugins/kibana_utils/public/store/react.ts b/src/plugins/kibana_utils/public/store/react.ts index d561f9bb3cf34..00861b2b0b8fe 100644 --- a/src/plugins/kibana_utils/public/store/react.ts +++ b/src/plugins/kibana_utils/public/store/react.ts @@ -86,10 +86,12 @@ export const createContext = < comparator?: Comparator ): Result => { const { state$, get } = useStore(); + /* eslint-disable react-hooks/exhaustive-deps */ const [observable$, unsubscribe] = useMemo( () => observableSelector(get(), state$, selector, comparator), [state$] ); + /* eslint-enable react-hooks/exhaustive-deps */ useLayoutEffect(() => unsubscribe, [observable$, unsubscribe]); const value = useObservable(observable$, selector(get())); return value;