NavigationEntry generates new key for child component on every re-render

[delaneyb]

Version

2.8.3

Reproduction link

https://play.nativescript.org/?template=play-vue&id=SsIRb7&v=7

Platform and OS info

Android 10 / Nativescript 7.2.0 / Windows 10

Steps to reproduce

Tap Go To A to navigate to trigger navigation to ComponentA. The setTimeout in mounted() will modify the testKey prop on the component instance after 1 second.

What is expected?

Nothing re-renders

What is actually happening?

The NavigationEntry re-renders, due to vuejs/vue#11942. A patch which recognises nothing has changed about the child would be expected, however the render function generates a new key by calling serializeNavigationOptions(options) during the re-render, which leads to the destination component instance being destroyed and a new one created. The cycle continues and the child is destroyed and re-created every 1 second indefinitely.

---

Together with vuejs/vue#11942, this issue can create a scenario where a component that is navigated to is destroyed and re-created many times or infinitely.

I couldn't detect any other cases where the updateComponent()/render() watcher for NavigationEntry depends on any data apart from this immediate watcher scenario.

I recognise this is a rare edge case, but it was extremely confusing to encounter and it may be a while before vuejs/vue#11942 receives any attention and is merged and the vue version is updated on this repo.

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.