React one-way data binding vs Angular two-way data binding

Question

After hours of reading blog posts, I understand that React has one-way data binding, and Angular has two-way. But I don't actually know what that means....

React

import { useState } from 'react';
import Switch from "./switch";

function App() {
  const [value, setValue] = useState(false);
  return (
    <Switch
      isOn={value}
      handleToggle={() => setValue(!value)}
    />
  );
}

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <switch [ngModel]="value" (ngModelChange)="value = $event"></switch>
  `,
})
export class AppComponent {
  value = false;
}

Those look functionally identical to me.

Can someone help explain the difference?

Your angular example isn't two-way binding. Two-way binding looks like [(something)]="something". — Karl Bielefeldt
– Karl Bielefeldt, Commented Nov 25, 2020 at 15:36

JanRecker · Accepted Answer · 2020-11-30 07:51:10Z

In your examples, both frameworks make use of two one-way bindings. That means in both cases there is a one way binding from the JavaScript datamodel to the HTML and a second binding from the HTML to the JavaScript model.

A "Two-way-Binding" would be (like @Karl Bielefeldt mentioned) to write (in Angular) someling like [(myHTMLAttribute)]="myJavaScriptValue"

The important difference is that in the second approach your value could be changed directly from both sides (HTML / JavaScript). While the one-way-binding approach makes it very explicit. The JavaScript value is reflected in the HTML. And if someone changes the value in HTML, the JavaScript value is NOT directly changed. Instead a method is called (which is under your control) and there you can decide to update the JavaScript value.

Two-way bindings safe some code you would have to write if you would use only one-way-binding.
On the other side it makes your code less explicit and partially harder to understand and less easy to debug.
At least thats what i think. :-)

Stack Exchange Network

React one-way data binding vs Angular two-way data binding

1 Answer 1

Your Answer

Hot Network Questions

React one-way data binding vs Angular two-way data binding

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions