Navigating to another instance of the same page

Ionic Framework Ionic React
#1

I’ve been rewriting an old ionic angular 1 firebase app in Firestore ionic 4 react.
I’m getting mostly good results but I am having a few issues with page transitions.

When I’m on a profile page, and I select a profile badge in a comment Which activates a router link to navigation To another profile page.

The issues are:
The old profile info is visible on the next page momentarily or the new info is seen on the old page.
Blank white flash when dark mode is enabled.

Any advice is appreciated, kind regards

#2

What are you using to manage your state when retrieving the profile information?

You could try using these babies to clear the profile information when you leave the first profile page. (I think the ionViewDidLeave has a type in the description, should probably be ‘… routing from has finished …’

ionViewWillEnter Fired when the component routing to is about to animate into view.
ionViewDidEnter Fired when the component routing to has finished animating.
ionViewWillLeave Fired when the component routing from is about to animate.
ionViewDidLeave Fired when the component routing to has finished animating.

Your Flash before dark mode… I don’t know.

#3

I’ve got usestate hooks for local state, and I just migrated from redux to zustand for caching app state. I’ll try the onview will enter hooks. I was comparing the Loaded Id to the route Id and tried clearing then, but it was not clearly visible.

As for the blank screen… I am planning to slow down the router animations so I can figure out what div needs that darkmode background.

Thanks for your input!

#4

Make sure you are using those lifecycle hooks instead of useEffect. useEffect doesn’t work correctly w/ Ionic Page transitions because Ionic caches pages in order to provide a true native navigation experience, so useEffect won’t be run or cleaned up like a typical react component.

#5

I found those lifecycle hooks in the docs! Thank you! This is going to vastly improve my application. I’ve been liking the useEffect hooks with the dependency array to reduce re-renders, but for some things these lifecycle hooks will come in handy!

#6

Glad to hear it! And yes, useEffect is still fine to use in the lifecycle of the page as long as you keep in mind the entry/cleanup semantic difference!