fix(v2): keep DocSearch state on remounts

[francoischalifour]

Motivation

The Docusaurus navbar remounts at a certain screen resize. This creates new variable references for objects and functions passed to the DocSearchModal component, resulting in a rerender of DocSearch that then loses the previous state (because we listen to these reference changes in our component).

This PR keeps references of DocSearch options by using useMemo and useRef.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Before

After

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 9f503cd

https://deploy-preview-3297--docusaurus-2.netlify.app

[slorber]

Hey

What just wondering, why using refs instead of useMemo/useCallback? Do you need stronger guarantee or something?

[slorber]

oooh this is a funny pattern I've never seen before :)

[francoischalifour]

@slorber history and withBaseUrl's references change at every render so I cannot use useMemo and useCallback here. Do you have a solution to avoid useRef here?

(I was able to use useCallback for transformSearchClient.)

[slorber]

Ahah I see it's this annoying problem again :)
Let's merge this and move on

(see facebook/react#16956)

[slorber]

Ahah I see it's this annoying problem again :)
Let's merge this and move on

(see facebook/react#16956)

[slorber]

one suggestion culd be to handle the memoization directly in the lib, and wrap your component in a parent component whose role is to make the props "stable"

That's a bit annoying but at least it could prevent end users to have to do this themselves, so the lib is more idiomatic to use