setState in queryHook breaks Hits component

Open Q&A
, ,
1

Hello. I am using React Instant Search Hooks and have attempted to access the query in SearchBox by using queryHook. However, when I attempt to store the query in in a state variable (using useState) my hits stop displaying in my Hits widget. I would love an explanation as to why this is occurring and how I might solve it. Here is a simple example of my code:

const [input, setInput] = useState('')

  const queryHook = (query, search) => {
    search(query);
    setInput(query)
  };
1 Like
2

I solved this by creating a component that accesses the query via indexUiState and then declaring it in submitIconComponent. I did this so I could use a Next.js Link to generate a query string:

function Submit() {
  const { indexUiState } = useInstantSearch()
  const query = indexUiState.query
  return (
    <Link href={{ pathname: '/search', query: { input: query } }}  >
      see all
    </Link>
  )
}

Seemed like the best solution considering I was not interested in writing a custom SearchBox and I was not able to call useInstantSearch where I import InstantSearch without generating an error. Still wondering why I can’t store a SearchBox input value in state. I tried many approaches that all broke InstantSearch.