React vs. Angular, the subtle differences

I’ve been using Angular for the last 2 years, and React for the last year. I learned a few things along the way that I feel are under-covered elsewhere, so I’m documenting them here for posterity.

Change detection

Angular uses observers (via dirty checking), while React uses getters and setters. The tradeoff is a cleaner API vs. more efficient change detection:

// angular
myMethod: function(){
  scope.foo = 42
  scope.bar = 'baz'
}
// react
myMethod: function(){
  this.setState(Object.assign(this.state, {
    foo: 42,
    bar: 'baz'
  })
}

Isolating state

React does a good job of isolating state, by forcing you to assign all internal state to this.state, and pass in all external state via this.props. Angular enforces no such thing — you can leave state wherever you want, or even observe external state from within your directive:

// angular
myService.foo = 42
scope.bar = 'baz'
scope.myService = myService
scope.$watch('myService.foo', function(){ ... })
scope.$watch('bar', function(){ ... })
// react
this.setState({
  foo: 42
})
this.state.foo // 42
this.props.bar // "bar" attribute passed into your Component

Subclassing

Angular’s base unit is the Directive, which is analogous to Components in React. Both are more full-featured, less standards-compliant implementations of Custom Elements. They look like this:

<!-- angular -->
<my-element></my-element>
<!-- react -->
<MyElement></MyElement>

Let’s say we have an element, and we want to add some behavior to it. In React, you’ll need to attach the behavior to a class, and subclass it:

const MyMixedInElement = React.createClass({
  mixins: [MyMixin]
})
<MyMixedInElement></MyMixedInElement>

In React, in order to consume MyElement with MyMixin mixed in, I need to create a new class.

Get Boris Cherny’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In Angular, mixins are attached to instances, not classes:

<my-element my-mixin></my-element>

This pattern is more dynamic, and lends itself well to reusable Directives by avoiding one-off classes.

Component APIs

Angular and React approach Component APIs a bit differently:

// angular
foo: '@'
bar: '&'
baz: '='
// react
propTypes: {
  foo: React.PropTypes.number,
  bar: React.PropTypes.instanceOf(Bar),
  baz: React.PropTypes.shape({
    moo: React.PropTypes.object,
    zoo: React.PropTypes.array
  })
}

Angular emphasizes binding type (text vs. 1-way vs. 2-way), while React emphasizes strongly typed APIs and 1-way binds everything by default.