"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."
Opened this issue · 4 comments
🐛 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
@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.
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).
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.
This also happens in production builds for me, where strict mode is disabled.