Is there another react form library that maintains full form state on form component unmount/remount?

Question

I'm wanting to migrate our front-end infrastructure off redux-form which seems to be largely abandoned now. We have projects with multiple forms that utilise the destroyOnUnmount={false} option set on the (redux-form) Form.

We have wizard type processes, and other CRUD type apps where a record is displayed across multiple tabs with a distinct form used on each tab, with react-router determining which form component is being rendered. Our custom field components use the field's meta information to visually display a fields validation state & error message based also on whether the field has been visited. When viewing a record that is split across multiple form components (in a multi-tab UI), a user needs to see the same form state when they switch back to a previously visited form.

In redux-form, the complete form state persists in the redux store when destroyOnUnmount={false} is set, which means when remounting the form component the complete state is rehydrated (visited, touched, error, etc). This is really useful as form component state is rehydrated when the component remounts.

I've looked at react-final-form & formik, and they don't appear to provide a way to save/restore the full form state across unmounting/remounting of the form component.

Are there other libraries that support this (and are well maintained), or perhaps there's a way to achieve this in formik/react-final-form that I'm missing?

Answer 1

It seems that you can achieve this using final-form

Create an instance of final-form:

import { createForm } from "final-form";
const form = createForm({onSubmit: fn});

Then, you can pass that form instance to the Form component:

<Form form={form}>

afaik, this way you can preserve form state across renders.

Answer 2

You can checkout react-hook-form.

Also, check out the wizard type process example here.