Is 2-way data binding necessary?

Lately I've been minorly obsessed with React/Redux, but I can also appreciate the popularity of Angular. I've been meaning to look more into Angular 2, so naturally I was interested when I came across this article: Angular 2 for React developers. The article was good, but I felt like there was an underlying tone of Angular 2 > React.

Before I begin, let me get a few disclaimers out of the way:

  1. I have little experience with Angular 1, none with Angular 2, and only a few months with React/Redux (currently using it for a small personal project).
  2. The article comes from a site meant to teach people about Angular 2, so obviously there will be a bit of bias towards Angular, and that's fine. I also have a bias towards React.
  3. I tried to make a comment on the article, but it hasn't been approved yet. I'm not patient enough to wait, so I decided to create a blog post instead :)

I'll also say that it doesn't really make sense to compare React to Angular, since React is only a view layer. It would be better to compare Angular with React and a Flux implementation (or some other state container); but since there isn't a golden standard, I understand why they kept it simple and only discussed React.

With that out of the way (whew), there was a quote in the article that bothered me:

"Unidirectional-way data flow makes it simpler for one to reason about application state, but sometimes you need two-way flow. This can’t be more true than when dealing with forms and user input or any other stateful component out there."

This irked me because I've found the concept of unidirectional data flow and pure (internally stateless) components to be one of the greatest advantages to a React/Redux architecture.

To address the issue of whether or not 2-way binding is necessary (especially when dealing with forms and user input), take a look at redux-form. This library handles forms for React/Redux using unidirectional data flow. I'm not aware of any use cases where 2-way binding is needed, but if you are, please comment below.

Unidirectional data flow also has numerous advantages over 2-way binding (source):

  • Everything has one source of truth, immensely improving code readability and reasoning.
  • Immutable state is debuggable. It's trivial to send a dump to server (with history) on exceptions and bugs.
  • Server-side rendering (without a headless browser). The code is - dare I say - isomorphic.
  • Time travel and undo out-of-the-box: Your entire app is one deterministic view (and serializable).

Personally, I've found the application state as "one source of truth" to be the biggest advantage. Once you get past the change in mindset (coming from 2-way data binding), it can be a beautiful thing. To learn more, I would recommend going through this tutorial. I had quite a few "aha moments" reading it.

I haven't had enough experience with React/Redux to be anywhere near an expert, but so far I'm a huge fan of the design principles, and I hope they become more of a standard going forward. What are your thoughts?


Read more posts by this author.

Greater New York City Area
comments powered by Disqus