What are the best practices and recommended usecases of <form.Subscribe>?

[andreashabau]

I am pretty confused of this feature, as the documentation is very compact and does not describe the possible different scenarios in-depth imo.

For example, I can see at least three different compiling scenarios for <form.Subscribe>:

1. Use it without children to simply trigger a side effect if a field value changes:

return (
  <>
    <form.Subscribe selector={(state) => state.values.userName}>
      {(userName) => {
        // ... do something ...
      }}
    </form.Subscribe>
    
    {/* Username Field with custom component */}
    <form.AppField
      name="userName"
      validators={...}
      children={(field) => (
        <field.UserNameInput />
      )}
    />

    {/* Email Field with custom component */}
    <form.AppField
      name="mailNickname"
      ...
    </form.AppField>
  </>

2. Use it with a nested element child return value:

return (
  <>
    <form.Subscribe selector={(state) => state.values.userName}>
      {(userName) => {
        // ... do something ...
        
        // User Name Field with custom component as return value from form.Subscribe?
        return (
          <form.AppField
            name="userName"
            validators={...}
            children={(field) => (
              <field.UserNameInput />
            )}
          />
        )
      }}
    </form.Subscribe>

    {/* Email Field with custom component */}
    <form.AppField
      name="mailNickname"
      ...
    </form.AppField>
  </>

3. Use it with children props:

return (
  <>
    <form.Subscribe
      selector={(state) => state.values.userName}
      children= {(userName) => {
        // ... do something ...
        
        // User Name Field with custom component as children prop to form.Subscribe?
        return (
          <form.AppField
            name="userName"
            validators={...}
            children={(field) => (
              <field.UserNameInput />
            )}
          />
        )
      }}  
    />

    {/* Email Field with custom component */}
    <form.AppField
      name="mailNickname"
      ...
    </form.AppField>
  </>

I see that the latter two are probably just the same but different syntax?

But which usecases are suitable to return child form fields within a Subscribe?
I accidentaly wrapped the same form field inside a Subscribe (as can be seen in my code snippets above) to which the subscribe subscribes to because this is not easy to understand at first and I did not really understand what the Subscribe is really doing:
I am still not sure if this is the way how it should be done, I would rather intuitively expect another field to be the child for the selector of the first one?
But still, why would I need children here?

Suppose, my use case is to update the email field and derive its value from a sanitized userinput, i.e. lowercased and removed special characters. Normally I would use the onChangeListenTo but it has this bug that I already reported #1410

I would like to know the exact consequences of using the Subscribe with or without children and especially the special case where the child is equal to the selector, is this allowed?

Also in regards of reactivity: The docs say something about reactivity, but for completeness lets discuss it here again, is the Subscribe triggering any rerenders? If not, how would it be able to return different React Nodes conditionally in its children code then?

[davidalvarezr]

I use <form.Subscribe> to Subscribe to the canSubmit state, this is particularly useful to disable a submit button for example:

const MyComponent () => {
    const form = useForm(...)

    return <form>
        // lots of fields...
         
        // When form.canSubmit changes, only what is inside this re-renders
        <form.Subscribe selector={(state) => state.canSubmit}>
            {(canSubmit) => <button disabled={!canSubmit}>Submit</button>}
        </form.Subscribe>
    </form>
}

The form.Subscribe component doesn't trigger component-level re-renders. Anytime the value subscribed to changes, only the form.Subscribe component re-renders.

If I understand correctly, this is the same as using using useStore, but useStore re-renders the whole component

const MyComponent () => {
    const form = useForm(...)

     // When form.canSubmit changes, whole MyComponent re-renders
    const canSubmit = useStore(form.store, (state) => state.canSubmit)
    
    return <form>
        // lots of fields...

        <button disabled={!canSubmit}>Submit</button>
    </form>
}

te, that useStore will cause a whole component re-render whenever the value subscribed to changes.

[luchillo17]

Another use I've given the subscribe is for errors on fields that don't have integrated error handling, for example if I have nested objects and I need to display the error at the object level in addition to the individual fields of that object or array (usually something like This section is required, or At least 1 contact phone number required.