"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 [email protected] 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.