Error on Suspense + render function + prop change while awaiting for render

[stenet]

Hi,

I have the following use case:

• Suspense
• Composable which returns a render function
• Component with top level await

If during the top level await a prop is changed,

then this leads to the following error:

Since the same trap works when not using a render function, but directly using the component, it must be related to my code somehow.

Any support on how I can solve the problem will be appreciated. The render function is necessary because in my case it contains a bit more logic than in this example.

The code for my example is https://stackblitz.com/edit/vitejs-vite-dnzwyk?file=src%2Fuse-render-slow-component.js.

Thank you!

[liulinboyi]

You can use like this:
https://stackblitz.com/edit/vitejs-vite-1nqp9c?file=src%2Fuse-render-slow-component.js

use-render-slow-component.js

import { h, ref, unref, onMounted } from 'vue';
import SlowComponent from './SlowComponent.vue';

export function useRenderSlowComponent() {
  const data = ref('A');

  const Comp = {
    setup() {
      onMounted(() => {
        setTimeout(() => {
          data.value = 'B';
        }, 700);
      });
    },
    render(props, context) {
      return h(
        SlowComponent,
        {
          data: unref(data),
        },
        null
      );
    },
  };

  return {
    Comp,
  };
}

[stenet]

Thank you @liulinboyi !

But do you have suggestion for when the ref comes from outside my scope, i.e. a parent component I cannot control?

[liulinboyi]

Thank you @liulinboyi !

But do you have suggestion for when the ref comes from outside my scope, i.e. a parent component I cannot control?

My suggest is in above condition such as use setTimeout and so on, don't to create a task for change the component's props before the component mounted.

In above condition if you want use setTimeout and so on to create a task for change the component's props, you should in onMounted lifecycle.

[stenet]

My example using setTimeout was not very practical, sorry about that.

I updated it to a more realistic example:
https://stackblitz.com/edit/vitejs-vite-nnbt7j?file=src%2Fuse-render-slow-component.js,src%2FApp.vue

In the app.vue there is now an editor with an input. The value is a prop for the nested component. If the user changes the value before the component is finally rendered, the component crashes.

I know that this could be handled with other concepts, but I am still trying to find out if and how I can optimize my render function so that the error does not occur.

[liulinboyi]

My example using setTimeout was not very practical, sorry about that.

I updated it to a more realistic example: stackblitz.com/edit/vitejs-vite-nnbt7j?file=src%2Fuse-render-slow-component.js,src%2FApp.vue

In the app.vue there is now an editor with an input. The value is a prop for the nested component. If the user changes the value before the component is finally rendered, the component crashes.

I know that this could be handled with other concepts, but I am still trying to find out if and how I can optimize my render function so that the error does not occur.

First of all <Suspense> is an experimental feature and its API will likely change. and don't use like that in Suspense(the component is not mounted) ,thanks.

The documentation has mention https://vuejs.org/guide/built-ins/suspense.html#events

I think you can use like this:

https://stackblitz.com/edit/vitejs-vite-8ttrdo?file=src%2Fuse-render-slow-component.js,src%2FApp.vue

<script setup>
import { ref } from 'vue';
import { useRenderSlowComponent } from './use-render-slow-component';

const state = ref('Value 1');
const { Comp } = useRenderSlowComponent();
const show = ref(false);
function resolve() {
  show.value = true;
}
</script>

<template>
  <div>Test Suspense + render function + top level await</div>

  <div>
    <div>Change the value within 7 seconds</div>
    <div>
      <input v-if="show" type="text" v-model="state" />
    </div>
  </div>

  <Suspense @resolve="resolve">
    <Comp :state="state" />
  </Suspense>
</template>

<style scoped></style>

End of my answers.

[stenet]

Thanks, but as mentioned I'm not looking for a workaround. I'm looking for the actual cause of the problem, which I think must be related to the Render Function, since it works without it.

I know that Suspense is still experimental, but it is already used in Nuxt and Evan said in some interviews that it will be stable with Vue v3.3.

[edison1105]

this is because the Comp is not an async component. it would help if you wrapped it like the below:

import { h, ref, unref } from 'vue';
import SlowComponent from './SlowComponent.vue';

function defAsyncComponent(
  comp,
  delay = 0
) {
  return {
    setup(props, { slots }) {
      const p = new Promise(resolve => {
        setTimeout(() => {
          resolve(() => h(comp, props, slots))
        }, delay)
      })
      return p
    }
  }
}
 
export function useRenderSlowComponent() {
  const Comp = defAsyncComponent({
    props:['state'],
    render() {
      return h(
        SlowComponent,
        {
          data: this.state,
        },
        null
      )
    }
  },2000) // this value great than the timeout value in Comp.vue
  return {
    Comp,
  };
}

[liulinboyi]

@stenet I think the answer can resolve your question😉.

[stenet]

@liulinboyi thank you, but this is another workaround, which will block the rendering for a certain time. Since in real life there are some call to the backend server it's hard to guess how long the requests take for every user and a high number for the timeout, to make sure the component doesn't crash, it not really an option.

I've currently overcome the problem by wrapping all probs in a single prop. This way the problem is gone. @edison1105 tagged the issue in Vue - so maybe there will be a more robust solution in the future.

Anyway, thank you guys for your time and assistance.