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.

[crutchcorn]

Any chance you'd want to open a PR to document this for others? :) Our docs need some help!

[alexkatz]

Sure! Here it is.

I figured it's easiest to link directly to the Store docs from the place where the Store instance is mentioned in the Form docs.

Feel free to alter it however you see fit.

[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.