fix: stable callbacks in useSearchQuery + refactor (#5751)

facebook · Oct 20, 2021 · d799405 · d799405
1 parent 098f210
commit d799405
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 32 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
@@ -129,8 +129,7 @@ function SearchPage() {
   const documentsFoundPlural = useDocumentsFoundPlural();
 
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
-  const {searchValue, updateSearchPath} = useSearchQuery();
-  const [searchQuery, setSearchQuery] = useState(searchValue);
+  const {searchQuery, setSearchQuery} = useSearchQuery();
   const initialSearchResultState = {
     items: [],
     query: null,
@@ -303,8 +302,6 @@ function SearchPage() {
   }, [loaderRef]);
 
   useEffect(() => {
-    updateSearchPath(searchQuery);
-
     searchResultStateDispatcher({type: 'reset'});
 
     if (searchQuery) {
@@ -314,12 +311,7 @@ function SearchPage() {
         makeSearch();
       }, 300);
     }
-  }, [
-    searchQuery,
-    docsSearchVersionsHelpers.searchVersions,
-    updateSearchPath,
-    makeSearch,
-  ]);
+  }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
 
   useEffect(() => {
     if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@@ -329,12 +321,6 @@ function SearchPage() {
     makeSearch(searchResultState.lastPage);
   }, [makeSearch, searchResultState.lastPage]);
 
-  useEffect(() => {
-    if (searchValue && searchValue !== searchQuery) {
-      setSearchQuery(searchValue);
-    }
-  }, [searchQuery, searchValue]);
-
   return (
     <Layout wrapperClassName="search-page-wrapper">
       <Head>

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/hooks/useSearchQuery.js b/packages/docusaurus-theme-search-algolia/src/theme/hooks/useSearchQuery.js
@@ -5,39 +5,58 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useHistory, useLocation} from '@docusaurus/router';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {useHistory} from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useCallback, useEffect, useState} from 'react';
 
 const SEARCH_PARAM_QUERY = 'q';
 
 function useSearchQuery() {
   const history = useHistory();
-  const location = useLocation();
-  const {siteConfig: {baseUrl} = {}} = useDocusaurusContext();
+  const {
+    siteConfig: {baseUrl},
+  } = useDocusaurusContext();
 
-  return {
-    searchValue:
-      (ExecutionEnvironment.canUseDOM &&
-        new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
-      '',
-    updateSearchPath: (searchValue) => {
-      const searchParams = new URLSearchParams(location.search);
-
-      if (searchValue) {
-        searchParams.set(SEARCH_PARAM_QUERY, searchValue);
+  const [searchQuery, setSearchQueryState] = useState('');
+
+  // Init search query just after React hydration
+  useEffect(() => {
+    const searchQueryStringValue =
+      new URLSearchParams(window.location.search).get(SEARCH_PARAM_QUERY) ?? '';
+
+    setSearchQueryState(searchQueryStringValue);
+  }, []);
+
+  const setSearchQuery = useCallback(
+    (newSearchQuery) => {
+      const searchParams = new URLSearchParams(window.location.search);
+
+      if (newSearchQuery) {
+        searchParams.set(SEARCH_PARAM_QUERY, newSearchQuery);
       } else {
         searchParams.delete(SEARCH_PARAM_QUERY);
       }
 
       history.replace({
         search: searchParams.toString(),
       });
+      setSearchQueryState(newSearchQuery);
     },
-    generateSearchPageLink: (searchValue) => {
+    [history],
+  );
+
+  const generateSearchPageLink = useCallback(
+    (targetSearchQuery) => {
       // Refer to https://github.com/facebook/docusaurus/pull/2838
-      return `${baseUrl}search?q=${encodeURIComponent(searchValue)}`;
+      return `${baseUrl}search?q=${encodeURIComponent(targetSearchQuery)}`;
     },
+    [baseUrl],
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    generateSearchPageLink,
   };
 }