diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md index 9d7fefde6cf39..de148be4fb2e5 100644 --- a/docs/docs/adding-search-with-algolia.md +++ b/docs/docs/adding-search-with-algolia.md @@ -313,7 +313,7 @@ You now need to hook up the two components to each other and perform the actual ```jsx:title=src/components/search/index.js import algoliasearch from "algoliasearch/lite" -import { createRef, default as React, useState } from "react" +import { createRef, default as React, useState, useMemo } from "react" import { InstantSearch } from "react-instantsearch-dom" import { ThemeProvider } from "styled-components" import StyledSearchBox from "./styled-search-box" @@ -331,9 +331,13 @@ export default function Search({ indices }) { const rootRef = createRef() const [query, setQuery] = useState() const [hasFocus, setFocus] = useState(false) - const searchClient = algoliasearch( - process.env.GATSBY_ALGOLIA_APP_ID, - process.env.GATSBY_ALGOLIA_SEARCH_KEY + const searchClient = useMemo( + () => + algoliasearch( + process.env.GATSBY_ALGOLIA_APP_ID, + process.env.GATSBY_ALGOLIA_SEARCH_KEY + ), + [] ) useClickOutside(rootRef, () => setFocus(false)) @@ -362,6 +366,8 @@ The `ThemeProvider` exports variables for the CSS to use (this is the [theming]( The `hasFocus` variable tracks whether the search box is currently in focus. When it is, it should display the input field (if not, only the search icon button is visible). +The `searchClient` variable is [memoized](https://reactjs.org/docs/hooks-reference.html#usememo) to avoid re-creating the Algolia search client when the `Search` component is re-rendered. This is important for performance, as the client caches searches to minimise the number of requests made to Algolia. + `StyledSearchRoot` is the root of the whole component. The React hook `useClickOutside` provides a callback if the user clicks anywhere else on the page, in which case it should close. `InstantSearch` from [`react-instantsearch-dom`](https://community.algolia.com/react-instantsearch) wraps the search box and search results to orchestrate the search.