I working on a project that need to upgrade redux-form to react-final-form. I just wonder that is there any documentation for that task.
EDIT: ๐๐๐ There is now a Migration Guide!! ๐๐๐
I meant to make a migration guide, but it's just so easy that I never found the motivation to do it. But I'll write a little here for all of the people who find this excellent SEO-bait via Google.
Rather than "decorate" your form component with a HOC, you use ๐ React Final Form's <Form>
component inside your form component to give you all of your form state via a render prop. Most of the config stuff from Redux Form maps directly onto props to <Form>
, e.g. initialValues
, onSubmit
, etc.
The <Field>
API is nearly identical, but with the added benefit that you can define how your field is rendered inline via a render prop (using a "fat arrow" function as your component
prop in Redux Form was forbidden and a common pitfall). ๐ React Final Form has a few extra bits of field state, like dirtySinceLastSubmit
, which can come in handy.
By default, Redux Form would not rerender your entire form on every value change, forcing you to use a getFormValues()
selector if you needed them in realtime. React Final Form does rerender on every value change by default because for most small forms, this is just fine. But ๐ React Final Form allows fine tuning of rerendering via providing a subscription
prop to <Form>
, specifying exactly which pieces (slices) of form state you want to rerender for. Then, any time you were using a selector in Redux Form, you would use a <FormSpy>
component in ๐ React Final Form, which allows you to subscribe ("select") parts of the form state to rerender for.
As linked in the other answer, this talk explains the difference pretty well. More talks will be given later in 2019.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With