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?