[Bug]: "react-router-dom-v5-compat" <CompatRouter> doesn't unsubscribe from history potentially causing tests to memory leak

[chi11ed]

What version of React Router are you using?

Latest "react-router-dom-v5-compat"

Steps to Reproduce

1. Have a global instance of history created and shared
2. Run jest tests
3. Before rendering a test case by React use directly historyInstance.replace() (or any other manipulation) to set up history URL or have legacy tests which can do something with history not awaiting all the promises.

Expected Behavior

<CompatRouter> should stop listening history on unmount

Actual Behavior

Here unsubscribe function is not returned from the effect.

Depending on a mess in tests, it is

• Either this error output

    Warning: An update to CompatRouter inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

• Or this error output

  console.error
    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.

[timdorr]

This is a side-effect of the transition to v6. You no longer have history instances in that version, so there is no need to unsubscribe. The state data disappears when the component is unmounted. For the transition to v6, CompatRouter is not intended to be used long-term and may have quirks while you use it. It is only for a faster transition to v6 and should be removed as soon as you no longer have v5 code in place.

[chi11ed]

@timdorr Thanks for taking a look 👍 I understand CompatRouter is not intended to be used long-term, but for large projects which have some legacy unpleasant moments it yet might take a bit longer, and what is needed to make transition more stable is just to properly clean up things and unsubscribe from things it was subscribed.

By unpleasant moments in legacy projects I mean simply this:

// historyInstance.ts
export const history = createBrowserHistory({ basename: '/something' })

// router.tsx
import { Router } from 'react-router-dom'
import { CompatRouter } from 'react-router-dom-v5-compat'

function RouterProvider({ history, routes }: RouterProviderProps) {
  return (
    <Router history={history}>
      <CompatRouter>

Regardless of amount of time which ComparRouter is being used and migration to v6 is happening - currently it has an impact on tests, because N tests within 1 spec mount N CompatRouters and neither of those unsubscribing it causing memory leaks.

The state data disappears when the component is unmounted.

As explained above, it's not a problem of resetting state - it's a problem of memory leaks in projects which unfortunately can't quickly get rid of shared history instance.
Would that be possible to reopen he issue and yet fix missing cleanup? In the end I assume we all agree that cleanups in software are important to avoid undesired things :)