TanStack
fix(vue-form): losing reactivity
close #1515 close #1276
Fix of loss of reactivity Refactor Field: improve granular updates and lazy slot props
Would it be possible to watch default values key so it can update when it changes? This could be useful when fetching data, instead of creating a lot of computed properties like the example
Would it be possible to watch default values key so it can update when it changes? This could be useful when fetching data, instead of creating a lot of computed properties like the example
Config changes should be tracked
https://github.com/TanStack/form/pull/1371/files#diff-0a5a2e9d19c33d06bab093ed6ec5baeccdb1d5eb94def19bffd0555c82658597R246-R250
Hey @teleskop150750. Do you have any workaround until this is merged? I think it hasn't been reviewed yet since the main issue was closed
It's great to have the explanation listed in the linked issue, but even with a perfect PR, this is a breaking change. It would be delayed until a v2 release.
This also appears to be a (major) improvement on Vue's current reactivity system rather than 'fixing' a loss of reactivity. Please correct me if I'm wrong.
It's great to have the explanation listed in the linked issue, but even with a perfect PR, this is a breaking change. It would be delayed until a v2 release.
This also appears to be a (major) improvement on Vue's current reactivity system rather than 'fixing' a loss of reactivity. Please correct me if I'm wrong.
The implementation is synchronized with the solidjs version. In signal-based frameworks, it is necessary to pass reactive data in callbacks. There are other workarounds, such as a getter object field or proxy. But they are more complex and inconvenient.
For some reason, SolidJs makes such mistakes less often and passes parameters correctly. In Vue, this causes difficulties every time because Ref is confusing
https://github.com/vuejs/rfcs/discussions/747
The current implementation of Vue lacks wathEffect for parameters. So updating parameters does not update the state.
UPD:
You can try to rewrite the PR to keep the API. I wanted to bring it closer to SolidJs in advance because it is more flexible and less likely to be subject to changes in the future.
The current implementation of Vue lacks withEffect for parameters. So updating parameters does not update the state.
Can you elaborate on this? Can that be fixed with the current API until v2 (maybe) migrates to this signal-based one?
Solif js Update FormApi
VueJS No dependency tracking
example fix
https://vuejs.org/api/reactivity-utilities.html#tovalue
function useForm(opts?: MaybeRefOrGetter<Options>) {
const api = new FormApi(opts?.())
let isMouned = false
watchEffect(() => {
const optsVal = toValue(opts)
if (isMouned) {
api.update(optsVal)
}
})
onMounted(() => {
isMouned = true
formApi.mount()
})
}
I made additional edits to FormField. I don't remember the exact reason. I think it was to reduce the number of updates.