Controlled Input Pattern in React

with working code repo examples

Coming from Angular background, two-way binding is something that is easily accessible and can be used without much thought. Things just seem to magically work when it comes to passing values to and from the view.

React, however, works a little differently. States have to be explicitly set. It’s just how things are done. The entire premise of React is that it will update and render what users see when you, the coder, tells it to. Some people prefer it this way. Some just want to use Angular because they don’t have to write the extra code that comes with it.

Here’s the quick what, why and how two-way binding works in React.

The What and Why

Two-way binding is a pattern that connects a data model to the UI. In React, data binding is a one time event. There is no automated mechanism that updates what the user sees.

This as a result, performs better under load because there is no additional memory space consumed to make room for two-way binding that may or may not be used — and also one of the reasons why some people prefer React over Angular.

React’s fundamental philosophy is to ‘make code predictable’. One way binding takes it back to the bare bones day where expected…