feat(hooks): introduce `useInstantSearch()`

[Haroenv]

Summary

useInstantSearch is a new hook to access advanced functionality of InstantSearch without creating custom widgets:

• access to complete search results
• access to complete ui state
• functions to change the ui state
• refreshing the search results
• using middleware

Result

• implements useInstantSearch
• implements two underlying, non-exposed connectors for search results and ui state
• uses useInstantSearch for a refresh button in the example

[codesandbox-ci[bot]]

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 af4488fc549bcfbfd692eed36bbd9b79c6d5f2dc:

Sandbox	Source
algolia/create-instantsearch-app	Configuration
routing-basic	Configuration
hooks-example	Configuration

[netlify[bot]]

✅ Deploy Preview for react-instantsearch ready!

Name	Link
🔨 Latest commit	fa06a575212e1b297347d420e094f85a5613fe1e
🔍 Latest deploy log	https://app.netlify.com/sites/react-instantsearch/deploys/62973c0d355415000944d086
😎 Deploy Preview	https://deploy-preview-3494--react-instantsearch.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.

[netlify[bot]]

✅ Deploy Preview for react-instantsearch ready!

Name	Link
🔨 Latest commit	af4488fc549bcfbfd692eed36bbd9b79c6d5f2dc
🔍 Latest deploy log	https://app.netlify.com/sites/react-instantsearch/deploys/62a06b27056be90008170e7e
😎 Deploy Preview	https://deploy-preview-3494--react-instantsearch.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.

[francoischalifour]

What I wanted to put the light on in https://github.com/algolia/react-instantsearch/pull/3494#discussion_r886660022 is that it's not possible to recreate a router from the use() API because the middleware seems to be added after the first render.

You can see this in the <SearchRouter> component in this sandbox. Click a refinement, refresh, notice that the refinement disappears.

[RobbyUitbeijerse]

What I wanted to put the light on in https://github.com/algolia/react-instantsearch/pull/3494#discussion_r886660022 is that it's not possible to recreate a router from the use() API because the middleware seems to be added after the first render.

@Haroenv might be interesting to provide (initial) middleware like so?

const {} = useInstantSearch({ 
  use: [middleware1, middleware2]
})

similar to how it's been implemented in swr: https://swr.vercel.app/docs/middleware

[Haroenv]

Sounds interesting, but I wonder if those also would be added too late. Maybe it should be a prop to the InstantSearch component instead of a use function?

[francoischalifour]

@RobbyUitbeijerse @Haroenv Thinking back at it, it makes sense that we cannot recreate a complete router from use(), and this is because InstantSearch.js treats routing as a special middleware internally, which subscribes before start(). So this is not a blocker for useInstantSearch().use. The routing prop would be the way to plug a routing system.

A more conventional middleware that I tried to reimplement is the Insights middleware with <InsightsMiddleware> in this sandbox. You can see that from the useInstantSearch().use standpoint, it works correctly.

So to me this is enough to validate this API.

[francoischalifour]

For reference, I also created a <ScrollTo> component based on use(). It's similar to the official <ScrollTo> widget from v6.