Is there a way to subscribe to form changes that doesn't trigger re-renders?

[alexkatz]

For example, in react-hook-form, it's possible to do something like:

useEffect(() => {
  const sub = watch(formData => { 
    console.log('Side effect'); 
  });

  return sub.unsubscribe;
}, [watch]);

I've noticed FormApi's Subscribe component and the useStore hook which both seem handy, but don't quite cover this use case.

Perhaps onChange and onChangeAsync handle this, but they seem geared more toward validation and I'm hesitant to put side effects in there.

Are there plans for this kind of functionality? Maybe I'm overlooking something?

Anyway, thanks for such an awesome library!

[alexkatz]

Welp, answered my own question after fiddling around for a little:

useEffect(() => {
  return form.store.subscribe(() => {
    console.log(form.store.state.values);
  });
}, [form.store]);

This allows me to observe changes to form state without triggering any re-renders.

It's not documented on the TanStack Form website, but it is documented in the underlying TanStack Store docs.

[xmsz-stu]

hi is any way to subscibe only one field, or how can i know which field is changed?

[Balastrong]

hi is any way to subscibe only one field, or how can i know which field is changed?

Have a look at the Reactivity docs :)

[xmsz-stu]

hi is any way to subscibe only one field, or how can i know which field is changed?

Have a look at the Reactivity docs :)

But it will case re-render

[Balastrong]

Yes, subscribing to a field is designed for that, to trigger a rerender when the value is updated.

[xmsz-stu]

Yes, subscribing to a field is designed for that, to trigger a rerender when the value is updated.

ok

[JohanCodinha]

Is this the way to go to trigger side effect on form store change ?
I want to update url query params when the form values change.

[nico-martinucci]

Alternative could be to do it inside a form inputs onChange, depending on how many you have to manage.