"Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead."

[Ra0R]

🐛 Current behavior

When using InstantSearchNext ("react-instantsearch-nextjs": "0.3.17"), and ▲ NextJs 14.2.17 switching from one page that has InstantSearchNext-Component to another will throw an error.

Error: Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. Hits@webpack-internal:///(app-pages-browser)/./node_modules/react-instantsearch/dist/es/widgets/Hits.js:31:20 div div Content InstantSearch@webpack-internal:///(app-pages-browser)/./node_modules/react-instantsearch-core/dist/es/components/InstantSearch.js:17:18 InstantSearchSSRProvider@webpack-internal:///(app-pages-browser)/./node_modules/react-instantsearch-core/dist/es/components/InstantSearchSSRProvider.js:23:18 InstantSearchNext@webpack-internal:///(app-pages-browser)/./node_modules/react-instantsearch-nextjs/dist/es/InstantSearchNext.js:30:18 div div Search Page (Server) InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:244:18 RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9 RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:24 NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:62 ....

🔍 Steps to reproduce

• Click link to open search
• Open console
• Enter something into the search box
• Quickly switch to /page2

Live reproduction

https://codesandbox.io/p/github/Ra0R/bug-repro/master

💭 Expected behavior

Should not throw an error. Probably there is some useEffect firing that tries to update the component before mounting.

Package version

"react-instantsearch": "^7.13.7", "react-instantsearch-nextjs": "^0.3.17"

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Ra0R]

@Haroenv I think the problem lies within "InitializePromise"-Component. Somehow when navigating from page A to page B, the subscription to waitForResults is renewed and resolves on the old page (Page A) - which at that point is unmounted.

[Ra0R]

Any update on this? It is costing us money (since we had to do a workaround rendering InstantSearchNext on the server and InstantSearch on the client).

[louisfisch]

I ran into the same issue using react-instantsearch-nextjs@0.3.20 and it looks like it was coming from reactStrictMode: false in my next.config.mjs file. I cannot confirm though.

[Ra0R]

This also happens in production builds for me, where strict mode is disabled.

[DusanDragulaGR]

@Ra0R I have the same issue. I thought the problem was in my implementation of custom widgets with hooks (Next.js App Router application + custom routing), but after a whole day of reworking, it still happens sometimes. But it happens also when I'm navigating faster between page with instant search instance and page without (simple page).

[Ra0R]

@DusanDragulaGR @louisfisch Did you find a workaround?
Or is there any update on the issue? @Haroenv

We ended up doing this:

<div suppressHydrationWarning={true}>
	{!isClient && (
		<InstantSearchNext
			searchClient={searchClient}
			indexName={index}>
		</InstantSearchNext>
	)}


	{isClient && (
		<InstantSearch
			searchClient={searchClient}
			indexName={index}
			}>
			{Children}
		</InstantSearch>
	)}
</div>

But this solution has the drawback that the index is hit twice. Additionally, the CLS (cumulativ layout shift) is increased.

[Ra0R]

Seems to be fixed with the latest version of react-instantsearch-nextjs