swr hook antipattern - closures

[pke]

I recently stumbled about some code that looked like this:

export const useSearch = (limit = 10, offset = 0) => {
  const [query, setQuery] = React.useState("")
  const { data } = useSWR(query.length >= 3 ? [limit, offset, query] : null, () => {
    return search(query, limit, offset)
  })
  return {
    data: results
    setQuery
  }

I think there are 2 faults with this hook:

1. the query should be part of the hooks input arguments
2. (most important) the search function uses closures of limit, offset, query (in line 4) as they are not handed in to it via its own function arguments (in line 3)

What I think would happen if the useSearch hook would be called with different inputs (in a component based on incoming props) the search function would only ever be called with the very first inputs handed to the hook. Is my fear correct?

Take this example:

const Search = () => {
  const [limit, setLimit] = React.useState(10)
  const { results } = useSearch(limit)
  
  return (
    <DropDown onChange={setLimit}/>    
  )
}

When the drop down triggers a change to limit to 20 via setLimit this could cause a re-render and the useSearch hook is called with the newly set limit. Would the result reflect the new limit of 20 or would it still be 10?

Also can give someone give me a hint how to compose a hook test to catch this error (if it is one)?