Introducing React InstantSearch Hooks experimental in v6.13.0

[francoischalifour]

We're thrilled to announce that React InstantSearch Hooks package is released as experimental 🎉

React Hooks for InstantSearch was a long-awaited feature that lets you create rich search UIs with friendly and modern React primitives. This new library was developed on top of InstantSearch.js, a solid foundation that allows us to implement features faster.

What's included

React InstantSearch Hooks is a headless library that exposes InstantSearch Connectors as Hooks, as well as their typings. It doesn't provide UI components for now.

Please keep in mind that this version is experimental, meaning that it is not production ready. We plan to release a stable version early next year.

Getting started

We're looking for early feedback and ideas. We recommend trying React InstantSearch Hooks this way:

• If you've been using Connectors (and not Widgets); you can use their respective Hooks and change the InstantSearch import from react-instantsearch-dom (or react-instantsearch-core) to react-instantsearch-hooks
• If you're unfamiliar with Connectors; you can start your new project with Hooks (if it's not meant to be production ready before early next year)

Check out how to get started in the documentation.

Note that React InstantSearch Hooks is not compatible with react-instantsearch-core and react-instantsearch-dom. Make sure to use Hooks within the InstantSearch component coming from react-instantsearch-hooks.

What's next

We published React InstantSearch Hooks as experimental and we're ready to receive user feedback. This is just the first milestone of this library.

Our next step is to support all existing Connectors and provide feature parity with React InstantSearch Core/DOM before stable release, planned for early next year. Once the whole headless API is released, we will start providing UI components based on these Connectors, that we call Widgets.

Our long-term plan is to use the Hooks package in Core, and to rely on the new Core for the DOM package.

Early feedback

Since we're in the experimental phase, the API may still change. Your feedback and contributions could help shape it for the better. So tell us more:

• Are there confusing parts in the new Hooks API?
• What did you wish was simpler?
• Are there things you wanted to do and couldn't?
• Anything you would have seen differently?

Let us know below! You can report any bugs in GitHub Issues.

---

Getting started →

This discussion was created from the release v6.13.0.

[hadminh]

Can you choose Mapbox instead of Google. Being able to add react component to a popup is an awesome feature to have. Currently I have to do something like this.

    this.markers = hits.map((hit, index) => {
      const placeholder = document.createElement("div");
      ReactDOM.render(<CustomSwiper hit={hit} />, placeholder);
      const marker = new mapboxgl.Marker()
        .setLngLat(hit._geoloc)
        .setPopup(new mapboxgl.Popup({ offset: 25 }).setDOMContent(placeholder))
        .addTo(this.map.current);

[hadminh]

Please Note, I am really grateful for this library. It made my life so much easier. Take these comments as a suggestion and not a demand.

[hadminh]

This is already possible though https://react-instantsearch.netlify.app/storybook/?path=/story/geosearch--with-hits-communication-custom

[Haroenv]

In the latest React InstantSearch we didn't yet implement a geo-search, but most likely you'd be able to do that by using connectGeoSearch instead of the component and connecting it to map box manually, did you try this and get stuck somewhere?

[hadminh]

Also having a way for the components to communicate with one another. For example, the GeoSearch and Hits. By clicking on the Marker from GeoSearch component, the Hits component would Scroll to the corresponding Hit or in reverse, by clicking on the Hit, the Marker from the GeoSearch component would center on the MapView.

[hadminh]

Please Note, I am really grateful for this library. It made my life so much easier. Take these comments as a suggestion and not a demand.

[Haroenv]

This is an interesting idea, I think for that there should be some kind of parameter to "highlight" an object that can be set from geo or hits. You can already do this today with a similar code to this:

// selector
const HitsSelectorContext = React.createContext();

const HitSelector = ({ children }) => {
  const [activeHit, setActiveHit] = React.useState(undefined);

  return (
    <HitsSelectorContext.Provider value={{ activeHit, setActiveHit }}>
      {children}
    </HitsSelectorContext.Provider>
  );
};

// hits
import { useHits } from 'react-instantsearch-hooks';

const Hits = () => {
  const { hits } = useHits();
  const { activeHit, setActiveHit } = React.useContext(HitsSelectorContext);

  return <>{/* ... */}</>;
};

// GeoSearch

import { connectGeoSearch } from 'instantsearch.js/es/connectors';
import { useConnector } from 'react-instantsearch-hooks';

function useGeoSearch(props) {
  return useConnector(connectGeoSearch, props);
}

const GeoSearch = () => {
  const { hits } = useGeoSearch();
  const { activeHit, setActiveHit } = React.useContext(HitsSelectorContext);

  return <>{/* ... */}</>;
};

// app

const App = () => (
  <InstantSearch>
    <HitsSelector>
      <Hits />
      <GeoSearch />
    </HitsSelector>
  </InstantSearch>
);

[hadminh]

Thanks you for your React 101 solution 👍 My gut feeling says that I can achieve a snappier solution by using this method. Though it doesn't sound React. I think as we write to state we may degrade performance. I'd be interested in your feedback.

//mapboxComponent
marker.getElement().addEventListener("click", (e) => {
  document.querySelector(`div[data-ml="${hit.Ml_num}"]`).scrollIntoView();
});


//CustomeHits
<div>
  {hits.map((hit) => (
    <div key={hit.objectID} data-ml={hit.Ml_num}>
      <Card />
    </div>
  ))}
</div>;

[hadminh]

I have noticed my Application which is similar in nature to Airbnb starts to slow down, as the markers or hits increase. This may have to do with the comparison equality. I have many fields in my hit, this may have to do with that. It may be better for my application to use Referencial Equality (===). So giving us the option to choose, from Shallow Compare, Deep Compare or Reference Equality would be helpful.

[hadminh]

Please Note, I am really grateful for this library. It made my life so much easier. Take these comments as a suggestion and not a demand.

[francoischalifour]

Can you share code snippets showing us what performance optimizations you needed?

[hadminh]

Sorry for the late reply. Notice how in this example the render is called twice. https://codesandbox.io/s/elastic-https-q2spx?file=/components/app.js

[hadminh]

Optimistic UI, is kind of tricky to get it right, specially with RefinementList.

[hadminh]

Please Note, I am really grateful for this library. It made my life so much easier. Take these comments as a suggestion and not a demand.

[Haroenv]

It definitely can be, we haven't yet tackled this topic, as temporarily selecting the value might also not be the right behaviour

[francoischalifour]

Love seeing Optimistic UI being mentioned here. I talked about it in this thread and have ideas how we could implement it. There's some prior UX research to be done on that topic. We would need more engagement to see it prioritized now.

[hadminh]

Lazy loading the hit from Hits or InfiniteHits.

[Haroenv]

What part would be lazy-loaded?

[hadminh]

The hit will be lazyloaded. For example If I have 50 hit components to show. I only want to render the first 5 hits that are above the fold or on the screen.

[hadminh]

Maybe incorporating a library like this https://github.com/bvaughn/react-virtualized

[Haroenv]

in theory the hit itself should be some text, maybe an image. You could lazy-load the image alone with just hitComponent, but if you want to virtualise the whole list, you can use connectHits (useHits) and render the react-virtualised component yourself. Did you try that out / see any difference in performance?

[hadminh]

I haven't implemented react-virtialized yet, but connectHits generally causes an extra render. https://codesandbox.io/s/elastic-https-q2spx?file=/components/app.js

[hadminh]

Please Note, I am really grateful for this library. It made my life so much easier. Take these comments as a suggestion and not a demand.

[Haroenv]

Thanks for these points, I think they would do well as individual discussions in the future