fix(searchbutton): fix react hydration error

[nissy-dev]

fix #1242

After upgrading React v18, the error of react hydration mismatch happens not only in dev but also in prod.
I fixed this error by using useEffect, following the Next.js documentation, https://nextjs.org/docs/messages/react-hydration-error.

[netlify]

✅ Deploy Preview for docsearch ready!

Name	Link
🔨 Latest commit	375144e
🔍 Latest deploy log	https://app.netlify.com/sites/docsearch/deploys/62b5b0196e1b3b0008764847
😎 Deploy Preview	https://deploy-preview-1384--docsearch.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 375144e:

Sandbox	Source
Vanilla	Configuration

[nissy-dev]

@shortcuts If you have time, I'd be happy to have you review it

[shortcuts]

Thanks for the PR!

IIRC we switched to useMemo to prevent a UI flash, but it was not the solution and did not reverted the change. cc @francoischalifour

Can you confirm this fixes the production only? Locally I was still getting the error for dev builds

[shortcuts]

Thanks!

[nissy-dev]

@shortcuts

Can you confirm this fixes the production only? Locally I was still getting the error for dev builds

I confirmed both production build and dev build and they work well. I got the error at the first too, but realized it was due to the build cache. After removing the .next directory and running next dev again, the error disappeared and the behavior was as expected.