React and Form Management: Is Redux Form Worth It?

This is an improvement over my answer to a question in a Brazilian forum: "is using Redux for forms worth it?", in Portuguese. It assumes previous knowledge with React and Redux, and also mentions Redux Form, a library for managing forms in React.

It depends.

I know “it depends” is far from an interesting answer, yet that’s the perfect-generic answer to any “is using X worth it?” question. It really depends, yes, but more often you don’t need that.

Last year I picked Redux Form to build a multi-step form wizard, each step containing different forms, with its own fields and validations (some of them asynchronous!). In the end, all forms would be merged into one JavaScript object to be sent at some point.

So, I’d like to share my experiences and hopefully help you to figure it out what your problem is, and help you to decide by telling you how I’ve solved mine.

Where Redux Form thrives

Redux Form is useful for larger and more complex forms where ease of development, high control (especially), consistency, and persistence (especially) are required. There are advantages from:

  1. the state form being in the Redux store, and
  2. Redux Form’s abstraction itself.

Which are two different things. You might need both, just one, or none at all.

Ease of development

Considering you are using Redux Form’s Field and wrap your form in its higher-order component – you’re done. Your form will work out of the box.

Yes, you could also get to build forms in a productive way with only React, but I think it's still worth-mentioning that Redux Form makes it really painless.

High control

You can manipulate forms from anywhere in the application: you trigger Redux actions provided by Redux Form and that’s all. No need to create your own Redux reducers and actions.

Redux Form is also flexible on what can be an input. Anything works as a field: custom 3rd-party inputs, a regular HTML input, a fancy select component without any standard form element at all… Just pass the right props to it.

You can set up validation at the form and field level, supporting either synchronous or asynchronous validation. The errors triggered are also in the store – which makes it sweet to give useful feedbacks for users from anywhere, and also to debug! 👌

Consistency

All forms have the same data structure so you’d have the exact same information for every form and its fields, such as field values, field/form validity and further information (is the field touched? Pristine? Dirty?) in the Redux store.

Of course you can build forms consistently just by using React itself, but using Redux Form definitely enforces it.

Persistence

Since the state is already in the Redux store, Redux Form is easily pluggable with tools from the ecosystem.

Let’s say you want to save drafts from user’s inputs so people can finish and submit the form later. Redux Form + redux-persist make it pretty easy: the rehydrate process in the Redux store autofills the UI like magic!

Where Redux Form might die

In the thread, someone mentioned the article Redux Form is dead. TL;DR: It's not fucking dead, as any library, framework and whatsoever that has an "X is dead" post for it.

Let’s not forget that the JavaScript community is flooded with “X is dead” articles for everything in the ecosystem. That post, in particular, mentions valid points to consider such as ephemerality of the state (quoting Dan Abramov), performance issues within Redux Form, and the project maintenance/activity. I will go through them a bit.

Form data in the Redux store

Dan Abramov, creator of Redux, said: “Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. […]”.

Which is completely accurate. Where your state should live in your app depends entirely on its ephemerality – how trivial it is for the application as a whole when it comes to reading, updating it and so on.

In the post, that quote is used to support the claim that Redux Form fucks up when stores all form data in the Redux store by default – a pretty bold design decision for sure.

However, Dan did not write that in stone – he never does and he’s clear about it. That should serve as an encouragement for developers to think better about where your application’s states should go into. So, yes, you should think twice – and that doesn’t kill Redux Form.

The state of a form wizard, whose input data persists until the end of the steps (in a session or local level, for instance), whose inputs may trigger UI changes, whose inputs gets touched and changed by external components, it’s definitely not as ephemeral as the state of a newsletter sign up or a contact form. In the former, the form state is important for the whole application. Just notice that’s a very specific case.

Performance issues

Redux Form has reached a well-optimised (see redux-form #529 and redux-form #1405) state.

When it comes to performance, though, you should never rest easy anyway. If you measure and find that your forms are slow, you should find bottlenecks and optimise from that.

Project activity

Regarding the project activity, it is something to consider when deciding, and should always be. Is it active? Are there people maintaining it? Can YOU help to maintain it?

Yes, Erik (the author) has recently started working on another solution called Final Form, which moves the form state out of the Redux store. However, Redux Form is mature, still well maintained (check GitHub, and he even said it himself on Reddit), and its documentation is great.

Final words

Only if the state of your form is non-trivial enough to live in the Redux store, I’d give it a chance for Redux Form, especially if you are considering making your own solution. Redux Form has suffered and evolved a lot and nowadays it has a very stable and mature API you can count on, I’d say.

Other React form management solutions you should definitely be looking at are Formik and react-final-form, by Redux Form’s author. They don’t rely on Redux for state management and are most likely what you need now – or not.

The price is the abstraction, of course, it always is. 🙄 However, their everyday API is indeed minimal though, just be prepared to go through the documentation when you need to achieve specific stuff. In return, don’t forget you’ll get a consistent and solid structure to build forms upon.

Have fun building forms! 🎉

Tags: javascript, react