Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next Generation Forms with 🏁 React Final Form

Next Generation Forms with 🏁 React Final Form

Presented at React Alicante 2018.

Video: https://youtu.be/WoSzy-4mviQ
Repo: https://github.com/erikras/reactalicante2018

Erik Rasmussen

September 14, 2018

More Decks by Erik Rasmussen

Other Decks in Programming


  1. Form UI is different • Different input device • Rapid

    state change • Unidirectional data flow in React
  2. – Jordan Walke, @jordwalke August 29, 2017 “React exposed the

    inherent complexity of forms interactions that was always there.”
  3. What is Form State? • Which field currently has focus?

    • Which fields are dirty? • Which fields have errors? • Which fields has the user visited? • Are we currently running some sort of asynchronous validation? • Are we currently submitting? • Have we tried to submit and received some errors from the server? • Which fields are dirty since we last tried to submit?
  4. Complaints about Redux-Form • It's only for React? • I

    have to use Redux? • Why so much rerendering? • It's over 26k gzipped?!?
  5. Conceiving the ideal form library • Pure javascript • Framework

    agnostic • Subscription based • Modular, pluggable solutions
  6. final-form.org @finalformjs • Standalone form state management engine • Framework

    agnostic • Subscription based • Plugin capabilities, with "mutators" and "decorators" that allow arbitrary additional functionality • Zero dependencies • Only 4.3k gzipped
  7. final-form.org @finalformjs • React bindings for Final Form • Maps

    form and field state to render props • Handles React SyntheticEvents • Even smaller: 3.1k gzipped • Total React form solution: 7.4k gzipped
  8. React Final Form API •Form • Wraps the entire form

    and provides form state to a render prop •Field • Registers a field and provides field state and callback functions to a render prop •FormSpy • Provides a way to read form state within your form without rerendering the entire form.
  9. How to pick a library • Functionality • Extensibility •

    Examples • Well maintained • Code Coverage • Bundle Size • Does it make sense to you?
  10. – Erik Rasmussen, @erikras March 29, 2018 “Form library authors

    are like anesthesiologists: They help people feel a *little* bit better when enduring an excruciating experience.”