`watchEffect` effect does not run when expected
crutchcorn opened this issue · 0 comments
crutchcorn commented
While doing some testing, I noticed that watchEffect
does not seem to run the side effects when it would otherwise be expected to. Changing the example-vite/src/basic/useSetup.tsx
to add the following LOC:
watchEffect(() => console.log('watchEffect', counter.value));
I noticed that the console.log
never runs, even when counter.value
is updated.
Full example
import React from 'react'
import { useSetup, ref, computed, watch, watchEffect } from 'reactivue'
export function Counter(Props: { value: number }) {
const state = useSetup(
(props) => {
const counter = ref(props.value)
const inc = () => (counter.value += 1)
const dec = () => (counter.value -= 1)
const doubled = computed(() => counter.value * 2)
const isFive = ref(false)
watch(() => props.value, v => (counter.value = v))
watch(counter, v => (isFive.value = v === 5), { immediate: true })
watchEffect(() => console.log('watchEffect', counter.value));
return { counter, inc, dec, doubled, isFive }
},
Props,
)
const { counter, inc, doubled, dec, isFive } = state
return (
<div className="card">
<p>useSetup()</p>
<button onClick={dec}>dec -</button>
<button onClick={inc}>inc +</button>
<table>
<tbody>
<tr><td>Counter</td><td>{counter}</td></tr>
<tr><td>isFive</td><td>{JSON.stringify(isFive)}</td></tr>
<tr><td>Doubled</td><td>{doubled}</td></tr>
</tbody>
</table>
</div>
)
}