Preserve form state integrity via some invariance API

[vitormarkis]

Problem

I have two dropdown in my form, categories and movies.

If I select a category, some movie, and then change the category, the movie value should reset to the first option of the new movie list. Otherwise, the form would keep a movie value that doesn't belong to the selected category.

Solution with current API

@crutchcorn suggested using field listeners to update the form state and enforce this integrity.

Why I don't like this solution:

• Your rules are declared in the JSX tree - I prefer to declare my rules in one place, it's more predictable and easier to debug
• Circular derivations - is easy to set up your derivations in a way that can cause infinite loops

Proposal

If I had to design such API, I would something like Saphyra does with reducer:

const formOptions = {
  invarianceFn({ meta, values, diff }) {
    if(diff([v => v.category])) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

Or simply:

const formOptions = {
  invarianceFn({ meta, prevValues, values }) {
    if(prevValues.category !== values.category) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

Basically a pure function that transforms the state before it is ready to notify observers/listeners, enforcing the form values to always be in a valid state.

Keypoints:

• Top to bottom set of derivations, preventing circular derivation bugs
• You can declare your derivations in one place, instead of setting them imperatively all over the JSX tree

Up to discussion

How often should this function run? Can it support async await? Should it run before or after the validation?

Further discussion:
https://discord.com/channels/719702312431386674/1346611817098641438