React InstantSearch Not Working?

Hey everyone! I’m sure I’m just doing something wrong but I can’t seem to get React InstantSearch to work. My codesandbox:

My React Code:

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  "5C41K6G5KU",
  "624639fb5e6e1f23ea6b7fb0c9f3dfa8"
);

export default function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="MovieIndex">
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
}

This is based on code from this page: How to install React InstantSearch | Algolia

Issues I’m Seeing:

  • Search box doesn’t allow me to type
  • No hits visible (even though I can see the response coming back in the network tab)

What I’ve Tried

  • Originally was trying to do this in NextJs and though maybe it was related to NextJS so I moved it to CodeSandbox and see the same issues
  • Have tried alternate App IDs and Keys. (FYI, the key I’m using is NOT the admin key)
  • Have renamed the Index to see if that would change anything.

Thanks so much in advance for any help.

At least on CodeSandbox this looks like a rendering issue. I swapped out to the old style ReactDOM renderer in your index.js and it worked fine. It looks like the CodeSandbox is trying to us React 18 with createRoot and that seems to be causing issues with InstantSearch.

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
1 Like

Chuck,

You are a lifesaver. That absolutely fixed it. Thanks so much.

Best,
Brad

1 Like

Adding this here in case anyone else has this problem…

The root cause was that I was running React in Strict mode which seems to break the components. More details are here: next.config.js: React Strict Mode | Next.js

Changing from strict mode = true to strict mode = false resolved the issue.

5 Likes

It did help, thanks very much! Do you know if they have plans to fix it? Next.js does not recommend to set reactStrictMode to true.

Upgrading to react-instantsearch-hooks-web works, no need to downgrade react or disable strict mode

2 Likes

Generally how different is the new package when comparing to react-instantsearch? I would like to upgrade but have some custom components using HOC wrapper… connectStateResults.

Did you think the upgrade was straightforward?

My team did a spike on the package change to hooks and found it didn’t play nice with things like Federated search, so this is currently a no-go for us.