React vs Angular

What is React?

React is a JavaScript library for building user interfaces, released by Meta (formerly Facebook) in 2013. It is responsible for one thing: rendering UI components efficiently and re-rendering them when state changes.

React's key design choice is the virtual DOM — an in-memory representation of the real DOM. When a component's state changes, React builds a new virtual DOM tree, diffs it against the previous one, and applies only the minimum set of actual DOM mutations required. This keeps updates fast without the developer having to think about manual DOM manipulation.

Since React 16.8, the recommended way to write components is with hooks — functions prefixed with use that give function components access to state, side-effects, and shared logic. useState manages local state, useEffect handles side-effects such as data fetching, and useContext reads shared values without prop-drilling.

Because React only covers the view layer, you must choose companion libraries: React Router for navigation, Redux or Zustand for global state, and React Query or SWR for server data. This flexibility is both React's strength and the source of the infamous "decision fatigue" newcomers encounter.

React works with plain JavaScript but the ecosystem has largely standardised on TypeScript. When used with Next.js, React supports both client-side and server-side rendering, including React Server Components.

What is Angular?

Angular is a full-featured, opinionated framework for building web applications, maintained by Google. Version 2+ (simply called "Angular") was a complete rewrite of the original AngularJS and was released in 2016. It is TypeScript-first — the framework is written in TypeScript and the tooling assumes TypeScript throughout.

Angular includes everything a production application needs: a CLI for scaffolding, a router, an HTTP client, a forms module (both template-driven and reactive), a dependency injection container, and built-in test harnesses. Developers do not choose these — they are bundled, versioned, and upgraded together by the Angular team.

The framework's most distinctive feature is its hierarchical dependency injection (DI) system. Services are decorated with @Injectable() and registered in a module or component. Angular resolves and injects them automatically, managing their lifetimes and scopes. This pattern is familiar to developers coming from Java Spring or .NET.

Angular also embraces RxJS (Reactive Extensions for JavaScript) throughout — the HTTP client returns Observables, the Router exposes Observables, and forms emit value streams. RxJS is powerful for complex async flows but adds a significant learning curve. Angular 17 introduced a simpler Signals API as a more approachable reactivity model for teams less familiar with reactive programming.

Two-way data binding with [(ngModel)] is one of Angular's headline features for forms — changing a form field updates the bound variable, and updating the variable from code updates the field. React achieves the same outcome with explicit event handlers, which is more verbose but easier to trace.

Key differences explained

Library vs framework

The most fundamental distinction: React is a library — you call it when you need it. Angular is a framework — it provides the structure, and your code fills in the logic. In practice, this means a React app is an assembly of individually chosen packages, while an Angular app is built inside Angular's conventions.

Virtual DOM vs zone-based change detection

React's virtual DOM diffs component trees to determine what changed. Angular historically used Zone.js to monkey-patch browser APIs (setTimeout, fetch, etc.) and trigger change detection cycles when async operations complete. Angular 17+ introduces Signals, which track reactive state at a finer granularity and should make Zone.js optional in future versions.

TypeScript: optional vs mandatory

React is language-agnostic — you can use JavaScript or TypeScript. Angular is TypeScript-mandatory. For teams already invested in TypeScript, Angular's consistency is an advantage. For teams preferring gradual adoption, React's flexibility is appealing. See our TypeScript vs JavaScript comparison for more context.

Component architecture and modules

Both frameworks are component-based — UIs are built from isolated, reusable pieces. React components are functions (or classes) that return JSX. Angular components are TypeScript classes decorated with @Component(), paired with an HTML template and a CSS file. Angular 14+ introduced standalone components that do not require NgModules, reducing boilerplate significantly.

Ecosystem and opinionation

React's npm ecosystem is vast and fragmented — there are dozens of competing router, state, and form libraries. Angular's ecosystem is smaller but more cohesive — the Angular team controls the core tools and publishes an upgrade path between major versions. Teams who value one canonical way to do things tend to prefer Angular; teams who want to pick the best tool for each sub-problem tend to prefer React.

Code examples: the same component in each

A simple counter component to illustrate the syntax difference:

React (with hooks)

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Angular (standalone component)

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(n => n + 1); }
}