bug: Ionic Routing on currently active IonPage triggers transition and re-rendering, although it is rendered already

[phal0r]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x (particulary Ionic React 5.3.4)

Current behavior:
Given you have a Route element with an optional parameter, i.e.

<Route path="/locations/:locationId?" component={Map} />

Then using user events and history.replace() (from react-router package) to toggle between the routes /locations and locations/123. This is really slow (takes more than 2 seconds) and the chrome profiler indicates, that it always rerenders the component, which is not the expected behaviour.

Expected behavior:
Using history.replace() to toggle between routes of the same Route element and thus the same IonPage should not rerender the whole IonPage. It should go through the normal React lifecycle and pass down the new props (which in turn invoke sideeffects and other hooks to update the ui).

Steps to reproduce:
Set up an Ionic React project with a Route, which has an optional parameter. Add 2 buttons, which toggle the active route via history.replace() from react-router.

Performance Diagram

Other information:

Ionic info:

$ ionic info

Ionic:

   Ionic CLI       : 6.10.1 (*********\nvm\v12.16.0\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.3.4

Capacitor:

   Capacitor CLI   : 2.2.1
   @capacitor/core : 2.4.2

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. Can you please provide a full application we can use to reproduce the issue?

[phal0r]

@liamdebeasi Thanks for your reply. Yes, I will prepare a full application.

[BerkeAras]

@phal0r I cannot reproduce this issue. The Routing of Ionic React is in my case very very fast (faster then ionic core routing).

[phal0r]

@BerkeAras
Thanks for your answer and your effort. I think I need to rephrase my actual problem and give some more context:

In contrast to plain react-router, ionic router does much more work behind the scenes to enable page transitions, i.e. cloning elements, starting animations and so on. This is fine for most use cases, but for my case it is not suitable (and might be somewhat special?).

Given I have rendered an IonPage with a map and some markers on this map. Clicking a marker opens an overlay on the same component. So far this is easy to acomplish, but I would like to make the overlay deeplinkable, which means a click on a marker would not change some local state, but trigger a route change with an associated ID, that should be passed as a route param.
Now I don't want to rerender the IonPage, but just take advantage of the routing change and open the overlay in the same IonPage instance. For the IonPage this would mean, that only the routeParams would change and everything would work smoothly without having to wait for 2 seconds (in my case).

Is there a way to control this in such a detail? We use such a mechanism for routing, but only changing the optional state object. This does not trigger a rerender, but just passes the new params to the existing IonPage instance, but obviously the optional routing state can not be passed to another a browser by copying the link.

Does this clarify my problem? Maybe I should change the title of this issue to be more precise.

[liamdebeasi]

Without a code reproduction it is hard to say why this may be happening. Can you create one and post a link to it here?

[phal0r]

@liamdebeasi
I created a test repo here: https://github.com/phal0r/ionic-routing-test

It illustrates the difference while routing via route state and route params.

[averyjohnston]

Thanks for the report. As it turns out, this issue has some overlap with #24107, and the PR fixing that (#24672) will cover this as well. As such, I'm going to go ahead and close this out. The fix will be available in a future release of Ionic 6 👍

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.