Component mounts twice after going to different page from redux form

[sorin-sabo]

Component mounts twice after going to different page from redux form

Your environment

Software	Version(s)
redux-form	8.3.10
redux	4.0.1
react-redux	8.0.5
react	17.0.2 and 18.2.0
react-dom	17.0.2 and 18.2.0
node	18.16.0
npm if using
yarn if using	1.22.19
flow if using
typescript if using
Browser	Google Chrome, Brave, Edge, Firefox
Operating System	Alpline Linux (Docker), Amazon Linux 2

Steps to reproduce

Scenario:

1. Create a simple react app (latest version of redux-form and react 17)
2. Simple react App has 2 pages, each of those has its own route:

• /list - simple page with a title (optionally a table) and a button (optionally per table row) that redirects to /detail. Add to that page a componentDidMount() or useEffect() and console.log('Mount') in it. Upon refresh event, in console 'Mount' will get displayed once (as expected). (Optionally you can trigger an API and see that is triggered only once).
• /detail - simple page with a redux-form and a single field (optionally you can add more)

3. Open '/list' (component mounted once), press on button and navigate to '/detail' (component mounted once). Go back to '/list' component mounted twice!, go back to 'detail/' component mounted twice!. Error propagates until refresh.
4. In case you simply remove reduxForm from 'detail/' page leaving it a simple form, issue can no longer be reproduced.

Expected behaviour

Component mounted once (componentDidMount / useEffect triggered once)

Actual behaviour

Component mounted twice (componentDidMount / useEffect triggered twice). Just as an FYI, in case upgrade to react 18 actually gets mounted three times.

Other information