bug: IonReactRouter re-renders each page multiple times when changing routes

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

When navigating between routes, the old route and the new route get re-rendered multiple times. This is a major performance issue with large pages that contain many components.

Expected behavior:

The page being replaced should not re-render, and the new page should only render once.

Steps to reproduce:

1. Create a new app using the ionic starter: ionic start myApp2 tabs --type react
2. Add a console.log statement to each tab
3. Open the inspector and click between the tabs. Observe that each tab gets re-rendered multiple times.

Related code:

Sample application on Github: https://github.com/lindadick/ionic-routing-issue-example

Other information:

Here is a screenshot of what appears in the log after loading the app and clicking on Tab 2 once:

I confirmed that this same issue occurs if you navigate using IonRouterLink instead of tabs. The tabs were included in the example to make it easier to illustrate the problem.

Ionic info:

➜  myApp git:(master) ✗ ionic info

Ionic:

   Ionic CLI       : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.2

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.1 (/usr/bin/node)
   npm    : 6.14.5
   OS     : Linux 5.3

[puku0x]

@elylucas Oh no, this issue should keep being opened because the new IonReactRouter has the same bug.

[puku0x]

I’m facing the similar problem on a sample which has list and detail page that the previous page is rendered after the page transition. https://codesandbox.io/s/ionic-react-router-v530-render-should-not-be-called-twice-4hlu2?file=/src/pages/UserListPage.tsx

This is the biggest problem when implementing searching in the list page because it calls render function in the detail page and occurs unnecessary communication.