IonRouterOutlet

Ionic Framework Ionic React
1

Hi,

I’m using the ionic react tabs template for my project. I’ve created 5 routes and out of 5 in my two components, they call APIs on componentDidMount and componentWillRecieveProps.

Now the issue is IonRouterOutlet is not unmounting components on switching between tabs so it’s calling other components API calls. How can I prevent this? can we change the default behaviour of IonRouterOutler so it will unmount the previous component on the switch?

2

you could possibly determine of your tab is the current tab or not and only update when it is the current tab?

3

Hi Ab20,

This is by design and currently you cannot control it.

You can use our lifecycle events to get around some of the issues: https://ionicframework.com/docs/react/lifecycle

For the componentWillReceiveProps issue, you can try limiting the props that come into your pages so they won’t trigger a re-render while on another page. My guess is its the router props being passed in on a route change, So if you page doesn’t need the specific router props, you can try using the render method on the route instead of the component prop on the route like so:

<Route path ="/tabs/mypage" render={() => <My Page />} />

4

Thanks for reply, I’m doing this now, but because of this I need to change my functional component to class based and then in componentDidUpdate I’m checking new props location is same or not then call API. But don’t you think it’s a work around? like if we’re using tabs as a router it should un mount the previous tab and if developer wants then only it should do something like this?

5

Hi elylucas,

Yes, I saw these articles, it’s by default. But don’t you think it’s an issue, tabs are actually not made for routing pages? and it should be in the developer’s hand that page should unmount or not by some kind of flag?

1 Like
6

no… what other web framework does that? Not sure why you think the approach of adding and removing tabs from the DOM even makes sense?

7

@Ab20 - This video just came out of my own observation of multiple page re-renders in the sample application I was working on as part of this series.

I know that getting obsessed with page renders can get to be problematic, but what I observed provided an easy way for me to talk about useMemo and useCallback React Hooks.