Next Generation Forms with React Final Form - ERIK RASMUSSEN

React Alicante · 45K views · 2018 · 45:27

Open on YouTube

Web developmenttalkdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering React Final Form questions about submit handling and render performance, since it comes straight from the library's author.

Recommended by 2 people across 2 different months, 2019 to 2021.

What it is

A 45-minute conference talk from React Alicante 2018 in which Erik Rasmussen, author of Redux Form and React Final Form, explains why he built React Final Form and how to build common form types with it. It covers the design decisions behind the library and includes a repo and slides.

What people said

Recommends ladyk · 2019-03 · Stack Overflow · on “React-final-form how is submit handled in the render of the form”

Please check documentation [LINK] carefully. It seems that handleSumbit is kind of author's naming convention and should be used as a prop in render. On the other hand yours 'innerSumbit' (I suppose it's a form-handling function?) should be passed to 'onSumbit' in Form. Probably a good idea for you is to check react-final-form author's yt tutorial [this video] .

Recommends SURYANARAYAN RATH · 2021-04 · Stack Overflow · on “React-Final-Form delays in taking input with render props in Field”

The solution to this is subscriptions. The form is initially rendered on every action, react-final-form allows to handle subscription, <Form subscription={{handeleSubmit: true}} ...> </Form> We can do somewhat like this There is a video link for this. Video [this video] Hope you find this helpful

Cites Erik R. · 2019-07 · Stack Overflow · on “Is there any instruction to migrate from redux-form to react-final-form?”

EDIT: There is now a Migration Guide [LINK] !! 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" func