"Can't perform a React state update on an unmounted component." - Third party router listener not disposed in time?
adambremler opened this issue Β· comments
π Current behavior
When loading a page with the InstantSearch
component that syncs with a third party router via start
and dispose
, then navigating away, the following error occurs: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
.
π Steps to reproduce
- Load the initial page that renders the
InstantSearch
component, which is synced to a third party router (react-router-dom) viastart
anddispose
. - Navigate away by pressing a
Link
, and the error should appear in the console.
Live reproduction
https://codesandbox.io/p/sandbox/hopeful-night-flhh3j?file=%2Fsrc%2FApp.tsx
π Expected behavior
I would expect the dispose function to be run in time so that there is no attempt to sync the URL, which results in the state update on an unmounted component.
Package version
instantsearch.js 4.60.0, react-instantsearch 7.3.0
Operating system
macOS 13.2.1
Browser
Chrome 119.0.6045.159
Code of Conduct
- I agree to follow this project's Code of Conduct
@adambremler I have this exact problem, but with Next.js's router, and I can't fathom how to solve it. Did you sort it out in the end?
Dispose indeed happens after the widget and component is unmounted, to prevent it being called twice during strict mode. React Router should be synchronisable with the history router directly, similar to the next integration: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-router-nextjs/src/index.ts#L99-L175, have you tried that?