Bug - while using the /:tab(name) feature, props updated by useEffect() are not passed

When passing props updated by a useEffect() hook from parent → router → child, the parent and router components re-render properly with the updated state but the updated state does not get passed to the child because the child is not re-rendered.

This bug only occurs when using the /:tab(name) feature, as documented below.

Here’s a gist showing the bug. It’s just the default tabs setup with some minor tweaks, so nothing crazy going on here.

it would be helpful if you put this in a stackblitz project instead of gists, then we can just run the project to see the issue and not worry that we have a different environment than you.

Hmm okay. I’m having trouble getting my dependencies working in stackblitz. Here is the git repo though. Running ionic-react v6.1.14.

I am not sure I understand what the expected behavior is? I ran the project and the count gets updated on tab one… What am I missing here?

Interesting. On Ionic-react 6.1.14? It doesn’t update for me.

This bug was causing issues for me because my actual data flow goes AsyncDataLoader → Routes → Pages. When state got updated from the AsyncDataLoader, my Pages weren’t re-rendering with the updated data. Currently as a workaround I’m just not using the :tab(name) feature.

I appreciate you helping with this Aaron. Really curious if you were on v6.1.14, because I’m wondering what’s different about my environment then.

This is still an issue. Currently on ionic-react 6.2.8. I added the :tab() feature back in to my app just to see and immediately the render method of the child stops getting called after state updates from a parent. Though everyone works fine without even using the tabs feature soo…