Unidirectional data flow in React

Question

React has the notion of unidirectional data flow in contrast with two-way data binding from other frameworks e.g. Vue.js.

I've made the following snippets to sense the essential difference, then it seems that the unidirectional mandates the application to propagate any state transition, whereas the two-way conventionally does it for you.

Hopefully, I may have mistaken the gist here, so could you help clarify anything more fundamentally divergent between the duo?

var MyComponent = React.createClass({
  getInitialState: function () { 
    return {
      one: 'Hello', 
      two: 'world', 
      three: ''
    } 
  },
  handleValueOneChange: function (e) {
    this.setState({one: e.target.value})
  },
  handleValueTwoChange: function (e) {
    this.setState({two: e.target.value})
  },
  render: function () { 
    return (
      <div>
        <h1>
        {this.state.one + ' ' + this.state.two}
        </h1>
        <input value={this.state.one} 
          onChange={this.handleValueOneChange} />
        <input value={this.state.two} 
          onChange={this.handleValueTwoChange} />
      </div>
    )   
  }
})

ReactDOM.render(
  <MyComponent />, document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"/>

new Vue({
  el: '#app', 
  data: {
    one: 'Hello',
    two: 'world'
  },
  computed: {
    three: function() { return this.one + ' ' + this.two }
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <h1>{{ three }}</h1>
  <input v-model="one" />
  <input v-model="two" />
</div>

score 9 · Accepted Answer · edited May 23 '17 at 12:10

That's correct. I'm not familiar with vue.js but angular also does something similar with two way data binding. Now, React might look too tedious when you need it because of all the extra code that you need to write (at least it feels like that).

But what I have noticed is that two-way data binding is not needed for most of the pages and most of html components you write. They are essential for form based elements and that's mostly it. And most of the pages are not form based. I think the angular team has realized this fact and how much it impacts the performance of the application, and hence they introduced constructs for one-way data binding starting with version 1.3.

So, overall, it depends on what you are trying to do and choose the best solution. For example, you could be writing an application that is totally based on forms (I wrote one hug application that way) and two-way data binding will be of immense help. But most others, one-way is good enough.

Here are other SO posts that might be of interest for you:

Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding

What is two way binding?

score 1 · Answer 2 · answered Aug 16 '16 at 08:04

1

Vue.js is mostly one-way. v-model is the only case to my knowledge that is two-way

answered Aug 16 '16 at 08:04

gurghet

7,591
4
36
63

score 0 · Answer 3 · edited Jul 15 '22 at 04:57

There are some misconceptions in this post.

Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. https://v2.vuejs.org/v2/guide/forms.html

Vue.js's v-model="one" is (not exactly but sort of) a shortcut for

v-bind:value="one" v-on:change="one = $event.target.value."

The logic is the same as how it's done in React

value={this.state.one} onChange={this.handleValueOneChange}

It's the same thing. It's just that you need to write more boilerplate/repetitive code in React.

Unidirectional data flow in React

3 Answers3