I started an infinite loop with [watchEffect]

[JessYan0913]

Reactive variable modification happens when I call async method inside watchEffect and async method.
At the same time, using reactive variables in watchEffect will lead to an infinite loop of watchEffect.

code show as below：

infinite loop deom: https://codesandbox.io/s/patient-dream-zmhqse?file=/src/App.vue

import { ref, reactive, watchEffect } from "vue";

console.log("start");

const num = ref(0);

const state = reactive({
  num: 0,
});

const setNum = async (num) => {
  state.num = await Promise.resolve(() => num.value);
};

watchEffect(() => {
  console.log("efft");
  setNum(num);
  console.log(state.num);
});

setTimeout(() => {
  num.value = 1;
});

not infinite loop deom: https://codesandbox.io/s/delicate-bush-zwqhht?file=/src/App.vue

import { ref, reactive, watchEffect } from "vue";

console.log("start");

const num = ref(0);

const state = reactive({
  num: 0,
});

const setNum = async (num) => {
- state.num = await Promise.resolve(() => num.value);
+ state.num = num.value;
};

watchEffect(() => {
  console.log("efft");
  setNum(num);
  console.log(state.num);
});

setTimeout(() => {
  num.value = 1;
});

How can this phenomenon be explained?

[zhangzhonghe]

You can use the debugger to view the flow of code execution.

import { ref, reactive, watchEffect } from "vue";

console.log("start");

const num = ref(0);

const state = reactive({
  num: 0,
});

const setNum = async (num) => {
  state.num = await Promise.resolve(() => num.value);
+ debugger;
};

watchEffect(() => {
  console.log("efft");
  setNum(num);
+ debugger;
  console.log(state.num);
});

setTimeout(() => {
  num.value = 1;
});

[LinusBorg]

It's quite straighforward:

1. you read from state.num in console.log(state.num). That makes it a reactive dependency of this watchEffect.
2. Then you also change state.num in the function called in the effect. That change will trigger the effect to run again.

in short: don't read from and write to the same reactive state in watchEffect()

[JessYan0913]

This explanation is not quite correct, I try to rewrite the assignment operation of state.num as a synchronous operation. At the same time, the value operation of state.num is performed in watchEffect, so that it will not cause an infinite loop of watchEffect.

[JessYan0913]

It's quite straighforward:

1. you read from state.num in console.log(state.num). That makes it a reactive dependency of this watchEffect.
2. Then you also change state.num in the function called in the effect. That change will trigger the effect to run again.

in short: don't read from and write to the same reactive state in watchEffect()

The reason is that the assignment operation of state.num is asynchronous, and the value retrieval operation is synchronous, resulting in an infinite loop of watchEffect.

[rlemaigre]

@LinusBorg Ok this may be what is happening here (didn't check the code but that was my idea too).

But if simply reading and writing the value of the same reactive property in watchEffect always leads to an infinite loop (I have that same problem too right now), doesn't it mean watchEffect should be changed so this doesn't happen ? At least it could do something useful and well-defined instead ? Maybe those reactive properties that have been written to (the "effects" as I understand it, as in side effects) during watchEffect execution could be excluded from tracked dependencies ?

If this doesn't make sense, do you have a suggested workaround ?

[LinusBorg]

@rlemaigre It doesn't always happen. @JessYan0913 has already corrected my imprecise wording.

It only happens when you change the reactive dependency outside of the effect function - and that includes triggering that change asynchronously from within the effect function.

i.e.:

watchEffect(() => {
  if (msg.value = 'a') {
    msg.value = 'b'
  } else {
    msg.value = 'a'
  }
}

The above will not end in an infinite loop. The following, however, will:

import { nextTick } from 'vue'
watchEffect(async () => {
  if (msg.value = 'a') {
    await nextTick()
    msg.value = 'b'  // this runs in a separate microtask and is no longer part of the synchronous effect
  } else {
    await nextTick()
    msg.value = 'a'
  }
}

Triggering such an asynchronous change from within the effect is indisiguishable from any other change to that reactive dependency - other changes which the effect should react to.

Solutions depend on your actual situation, so I'd suggest opening a discussion in this repo about it. This issue is done.