search

kabisa / maji

Maji is a framework to build great hybrid mobile apps.
https://www.majimobile.com/
MIT License
18 stars 10 forks source link

Page Transitioning causes unwanted mounting of previous page #191

Closed leonderijke closed 6 years ago

leonderijke commented 6 years ago

The current page transitioning will render both the current and the previous page in order to animate the transition. The previous page is unmounted and mounted again.

Because of this, the previous page's lifecycle methods will be called again. For example, componentDidMount is sometimes used to load data, track pageviews or operate on the DOM. Therefore, it can be quite expensive.

To, me this is an unwanted side effect of the current implementation. In my current project it schews the analytics, because I'm tracking pageviews in componentDidMount.

I'd love to investigate a different implementation, where perhaps we can take some cues from React TransitionGroup etc.

pascalw commented 6 years ago

As discussed on Slack this is probably caused by the previousPage changing position in the DOM. Generating a consistent key for each page (based on page url?) could solve this. To be confirmed with some debugging though :-)

ruisalgado commented 6 years ago

indeed I've dabbled a bit with this but wasn't successful on my short attempt. I'll happily spend some time on it and contribute a fix as soon as I can