You can think of it a little like GraphQL's feature of only fetching the data your component needs to render, and nothing else.

I use a mutator and use it's changeValue function to 'change' the value of the relevant field (I supply the same value). This in turn notifies all relevant parties of the change to the form's state, and a validation is triggered.

Some user experience issue with the proposed solution: This won't show up the inline field error message if you just hit on submit and other fields already contained errors since the code on the onSubmit won't be hit

This is for a time picker. If you're picking times for today, you may pick a time that is 15 minutes from now. It's valid now because it's currently in the future. If you don't touch the form for the next 20 minutes then click submit, the submission should be prevented because your selected time is now 5 minutes in the past.

Form State Management

It is easily extensible (already implemented Final Form and Formik plugin extensions).

React Final Forms is a great library, an enhanced version of Redux Form

Form validation can get complex (synchronous validations, asynchronous validations, record validations, field validations, internationalization, schemas definitions...). To cope with these challenges we will leverage this into Fonk and Fonk Final Form adaptor for a React Final Form seamless integration.

Vue Final Form A form state management system for Vue that uses Final Form under the hood.

const field = state.fields[name] if (field) { field.data = { ...field.data, ...data } }

Keep in mind that the values in meta are dependent on you having subscribed to them with the subscription prop.

you may specify only the form state that you care about for rendering your gorgeous UI. You can think of it a little like GraphQL's feature of only fetching the data your component needs to render, and nothing else.

Allows batch updates by silencing notifications while the fn is running. Example: form.batch(() => { form.change('firstName', 'Erik') // listeners not notified form.change('lastName', 'Rasmussen') // listeners not notified }) // NOW all listeners notified

types.refinement might be what you're looking for, you could combine that with for example react-final-form. it is not depending on redux anymore. a form component of react-final-form wrapped by an @observer and using an action within onSubmit callback of it to actually persist the state has worked out well for me recently.

Final Form manages its own state. You put state in, with initialValues, and you get state out, with onSubmit

Suspense

@material-ui/core/Select