"Can't perform a React state update on an unmounted component." - Third party router listener not disposed in time?

[adambremler]

🐛 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

1. Load the initial page that renders the InstantSearch component, which is synced to a third party router (react-router-dom) via start and dispose.
2. 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

[howells]

@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?

[Haroenv]

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?