I have a search input in my <Layout> component. The UX I would like is that when you start typing in the box, it changes the URL to /search/?=whatever and uses the Search page to render my results. I have this mostly working but there is a persistent problem where a few characters will go missing, usually the 3rd or 4th, as things transition from the original page to the search page. The code is all up on https://github.com/coderanger/buddy.farm/ if that helps. Might be more of a generic React question but the heart of the issue seems to be navigate() forcing my input focus away from the text field while things process or something?
So I ended up solving this with three rounds of changes. First was the effect fixes mentioned by Andrew Gillis above, those were just straight up bugs. Second was to move the search index out of Gatsby page data (it was previously a static query in the page) and into its own JSON file. Shoutout to this blog post for laying out exactly how, but the short version is to use a createPages hook to run the same GraphQL query and write it to public/search.json, and then write some normal React stuff to load that data when the page mounts with a loading spinner and whatnot. And then third, I used a global context to continue recording the user inputs via onChange event after a navigate() was started and then restore from that once the page mounts.