Angular, React or Flutter? How They Compare and How to Choose

“Angular or React?” is one of the most common questions in front-end development, and “or Flutter?” is now often added to it. The question sounds like a choice between three brands of the same product. It is not. Angular is a complete framework for web applications; React is a library for turning state into UI, which needs a framework around it to make an application; Flutter is a toolkit for mobile, desktop, web and embedded apps that does not use the browser’s HTML at all, but draws every pixel itself. Each has been described in detail in this section: What Is Angular?, What Is React? and What Is Flutter?. This article puts them side by side and ends with a guide to choosing.

Comparisons of frameworks are usually long on opinion and short on measurement, so this one measures what it can. The same small app was built in all three, with Angular 22.2.3, React 19.3.1 with Vite 8.3.4, and Flutter 3.47.7 with Dart 3.13.5, the current stable releases in October 2026, and loaded in Chrome 155; the outputs and sizes below are shown as printed. Benchmark and survey figures come from their published sources, with notes on how far each can be trusted.

Three different kinds of thing

The three projects describe themselves in different terms, and the difference is the most important fact in this article:

• Angular is a framework. Its documentation calls it “a web framework that empowers developers to build fast, reliable applications”, and it ships, from one team and in one version, the router, forms, HTTP client, dependency injection, server rendering, the build and the test set-up.¹
• React is a library. Its repository calls it “the library for web and native user interfaces”.² It covers components, state and rendering; for everything else, its documentation says, “we recommend starting with a framework,” such as Next.js or React Router.³
• Flutter is a UI toolkit. It is for “building natively compiled applications for mobile, web, desktop and embedded devices from a single code base”, and it “doesn’t rely on web browser views or system-provided platform widgets”: its own engine renders the interface.⁴⁵

Two consequences follow. First, Angular and React compete directly: both are web technologies, both produce ordinary HTML elements in the browser’s DOM, and the browser does the styling, layout and painting, exactly as described in How Does a Web Browser Work?. Second, Flutter competes with them only partly. Its natural rival on phones is React Native, React’s sibling for native apps, and native toolkits such as SwiftUI and Jetpack Compose. On the web it can run, but its own documentation says it is aimed at app-like experiences rather than documents, which changes what it competes with there.⁶

A useful rule of thumb is to compare like with like:

At a glance

The rest of the article goes through those rows in more depth.

Architecture and mental model

All three are declarative and component-based: you describe what the interface should look like for the current state, compose it from reusable pieces, and let the framework work out what to change. They differ in what a component is and in how they find out that something changed.

Angular components are TypeScript classes decorated with @Component, paired with an HTML template. The template is compiled ahead of time into JavaScript instructions that create the DOM and update it, so a mistake in a template is a build error.¹⁵ Services are provided through dependency injection, which gives every component the instances it asks for from a hierarchy of injectors.²⁷ State that the template reads is held in signals, which record who reads them, so that setting one marks exactly those views for refreshing.²⁸ Angular is opinionated: there is one router, one HTTP client and one way to build, chosen by the Angular team.

React components are functions. They take props, may hold state through Hooks such as useState, and return elements, plain objects that describe the UI, usually written in JSX. React assumes components are pure functions of their inputs, and passes data down the tree in one direction only.²⁹³⁰ When state changes, React calls the component again, compares the new elements with the previous ones and commits the difference.¹⁹ React itself has no opinion on routing, data fetching or builds; the framework or libraries you choose do.

Flutter is built from widgets, immutable descriptions of part of the interface, all the way down: padding, alignment and gestures are widgets too. The framework keeps three trees, of widgets, elements and render objects, and lays out the render tree in a single pass in which “constraints go down, sizes go up, parent sets position”.⁵³¹ State lives in a State object that survives rebuilds; calling setState asks the framework to run build again.³²

Concepts map across the three roughly as follows:

The table follows each project’s documentation.^{3328343536373839404142434445464748} For someone who knows one, the others are less foreign than they first look: Flutter’s own guide for React Native developers notes that “like React Native, Flutter uses reactive-style views”, with setState causing build to run again.³²

The same app in all three

The clearest way to see the differences is one small program written three times. Each version shows a count and its double, and a button that adds one; the derived value is there to show how each tool handles computed state.

In Angular, the count is a signal, the double is a computed signal, and the template reads both:

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

@Component({
  selector: 'app-root',
  template: `
    <p>Count: {{ count() }}, doubled: {{ doubled() }}</p>
    <button (click)="increment()">Add one</button>
  `,
})
export class App {
  protected readonly count = signal(0);
  protected readonly doubled = computed(() => this.count() * 2);

  protected increment() {
    this.count.update((n) => n + 1);
  }
}

In React, the component is a function that runs again on every update, so the double is an ordinary variable:

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const doubled = count * 2;

  return (
    <>
      <p>Count: {count}, doubled: {doubled}</p>
      <button onClick={() => setCount((n) => n + 1)}>Add one</button>
    </>
  );
}

In Flutter, the widget is immutable, so the count lives in its State object, and the button and text are widgets from the Material library:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: Center(child: Counter()))));
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    final doubled = _count * 2;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Count: $_count, doubled: $doubled'),
        FilledButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Add one'),
        ),
      ],
    );
  }
}

Each was built for production and clicked twice. The two web apps were driven in headless Chrome, reading the paragraph’s text; the Flutter app was driven by a widget test, since its text is painted rather than stored in the DOM:

Angular 22.2.3 after two clicks: Count: 2, doubled: 4
React 19.3.1 + Vite 8.3 after two clicks: Count: 2, doubled: 4
Flutter after two taps: Count: 2, doubled: 4

The results are the same, but the three got there differently:

• Angular knows precisely what depends on count, because the template and doubled read it through the signal. Setting it marks those views dirty, and only they are re-checked.²⁸¹⁷
• React knows only that this component’s state changed, so it calls the whole function again and compares the result. By default the component’s children re-render too, which the React Compiler and memoisation reduce.¹⁹³⁹
• Flutter rebuilds the widgets below the dirty element, updates the matching elements and render objects, then runs its own layout, paint and rasterisation, the work a browser would do for the other two.⁵

The React version is the shortest and the Flutter version the longest: Dart has no equivalent of JSX or templates, so layout is written as nested constructor calls, and state lives in a separate class from the widget that uses it.

Rendering and performance

Where the pixels come from

Angular and React both end at the browser’s DOM. Each has its own way of deciding which DOM nodes to touch: Angular’s compiled templates check each binding against its last value and write only those that changed; React builds new element trees and diffs them against the old.¹⁵⁴⁹ After that the browser’s own engine styles, lays out and paints the page, so both inherit its text rendering, accessibility tree, form controls, text selection and search indexing.

Flutter replaces that whole pipeline. On mobile and desktop its engine draws with Impeller, which precompiles its shaders so that frames do not stall on shader compilation the first time an effect appears.¹⁶ On the web it draws into a canvas, with CanvasKit (Skia compiled to WebAssembly) for a JavaScript build or skwasm for a WebAssembly build.⁵⁵⁰⁵¹ That brings the same pixels on every platform, and full control over every pixel, at the price of shipping an engine with every app.

Speed: the js-framework-benchmark

The most widely cited speed comparison for DOM libraries is Stefan Krause’s js-framework-benchmark, which times operations on a table of rows (create 1,000 rows, replace them, update every tenth, swap two, remove one, and so on) in Chrome, measuring each from Chrome’s own timeline.⁵² Its official results for Chrome 154, for the “keyed” implementations, which keep a stable DOM element for each data item, include the following:⁵³

On these operations Angular and React are effectively tied, at about 1.5 times the duration of hand-written DOM code, while Solid and Svelte come much closer to it. Flutter is absent because it does not render DOM rows at all. The benchmark’s own caveats matter: its development snapshot “may not have the same quality” as the official releases, and the choice between keyed and non-keyed modes “can be a performance gain or can cause severe problems”.⁵² A table of a thousand rows is one workload among many, and a difference of a few milliseconds per operation is rarely what decides how fast an application feels.

Size: what the browser downloads

The counter apps above were built for production with each tool’s default command (ng build, vite build, and flutter build web --release, once for JavaScript and once with --wasm; both Flutter builds used --no-web-resources-cdn so that the engine was served from the same origin). Each build was served without compression and loaded in headless Chrome 155; every file the first load requested was recorded, and each was then compressed with gzip at level 9 and brotli at quality 11. Favicons and Flutter’s installable-app icon were excluded.

The Angular build is a single 98.8 kB script, and the React build a single 219.8 kB script. Angular’s compiled templates call only the runtime instructions they use, which lets the bundler drop the rest.¹⁵ Flutter’s largest files were its engine (canvaskit.wasm at 1,540.5 kB brotli, or skwasm.wasm at 1,209.8 kB), the compiled app and framework (main.dart.js at 415.8 kB, or main.dart.wasm at 424.4 kB), and a Roboto font at 74.8 kB, because a canvas cannot borrow the system’s fonts. The WebAssembly build needs a browser with WasmGC, which Chromium-based browsers have had since version 119, and falls back to the JavaScript build elsewhere.⁵¹

On Android the same app built with flutter build apk --release --split-per-abi produced a 64-bit ARM APK of 15.1 MB (15,108,964 bytes), which Flutter’s tool reports as 14.4MB. Almost all of it was two native libraries stored uncompressed: the engine, libflutter.so (11.7 MB), and the compiled Dart code, libapp.so (3.0 MB). Compressed with deflate they would be about 5.4 and 1.2 MB. Flutter’s documentation warns that release APKs are “not representative of your end-users’ download size”, because the stores reprocess them per device, and its FAQ puts the engine and framework at “a few megabytes compressed”.⁵⁴⁴

Why a toy app is not a verdict

Those numbers are real, but they measure the fixed cost of each tool, the part every app pays before writing a line of its own. They say little about real applications:

• Fixed and growing costs differ. In a real app, application code, libraries, images and fonts soon dominate. The median mobile web page already loaded 558 kB of JavaScript in the HTTP Archive’s 2024 survey of the web, of which a framework is only one part.⁵⁵
• Real apps load in pieces. Angular’s lazy routes and @defer blocks, and the code splitting of React frameworks, keep the first download small as an app grows.⁵⁶⁴¹
• Server rendering changes the first paint. Angular’s built-in server rendering and React frameworks such as Next.js send HTML that appears before any script runs; a Flutter web app shows nothing of its own until the engine has loaded.²¹⁵⁷⁵⁰
• Caching changes the second visit. An engine downloaded once is cached for later visits, which matters more for a tool used daily than for a page visited once.

What the numbers do show is the shape of each choice. The DOM frameworks start small and use what the browser already has. Flutter on the web starts at about 1.7 to 2 MB compressed because it brings its own renderer, which is acceptable for an application someone opens on purpose and uses for a long time, and a poor fit for a page that must appear instantly from a search result.

Developer experience

Getting started

Each project has a single command to begin, though React’s documentation points first to a framework:^5834159

npx @angular/cli new my-app                 # Angular
npx create-next-app@latest my-app           # React with Next.js
npm create vite@latest my-app -- --template react-ts   # React, client only
flutter create my_app                       # Flutter

The edit-and-look loop

Flutter has the strongest story here: stateful hot reload injects changed code into the running app in debug mode and keeps its state, so a counter showing 2 would still show 2 after the button’s colour was changed.⁶⁰ For React, Vite’s development server offers what it calls “extremely fast Hot Module Replacement (HMR)”.⁶¹ Angular’s ng serve hot-replaces global and component stylesheets, and reloads the page for other changes: its documentation says that, for hot module replacement, “currently, only global and component stylesheets are supported”.⁶²

Language

Angular is written in TypeScript and expects applications to be too, with templates type-checked at build time.¹⁵ React works with plain JavaScript, but the Vite template its documentation suggests is the TypeScript one, and JSX type-checks like any other expression.⁴¹ Flutter uses Dart, a language with sound null safety, pattern matching and records, which compiles just-in-time for development and ahead of time to machine code for release.⁶³⁶⁴ For a team that already knows TypeScript, Angular and React need no new language; Flutter does.

Tooling and testing

Angular’s CLI creates, generates, serves, builds, tests and updates a project, and new projects run unit tests with Vitest.⁵⁸³⁷ React’s tooling is whatever the chosen framework or build tool provides, and tests typically pair a runner such as Vitest with Testing Library.⁴¹⁴² Flutter’s CLI does the same jobs as Angular’s, and its widget tests run the real framework without a device or browser, as in the test that tapped the counter above. DevTools adds a widget inspector, profilers and an app size analyser.⁴⁸⁶⁵

Ecosystem: what comes in the box

The table shows where each everyday need is met: in the core project, in a package from the same team or organisation, or in the wider community.

The table follows each project’s documentation.^{16621416734445464768436970}

Angular’s integrated approach means fewer choices and fewer compatibility problems: the pieces are designed and released together. React’s approach means more choice and the largest pool of third-party libraries of the three, at the cost of assembling them and of more churn; Create React App, once the official starter, is now deprecated.⁷¹ Flutter sits in between: the core covers far more than React’s does, and its packages are published on pub.dev, where the documentation’s architecture guide recommends but does not require particular packages.⁴³⁷²

Stability and upgrades

How often a tool breaks its users matters more for an application that will live for ten years than for one that will live for one.

• Angular has the most explicit policy. Since version 22 a new major version comes every twelve months, with four to six minor releases in between; each major is supported for about 24 months, 12 of them in long-term support; and a deprecated API stays for at least one major version. ng update applies migrations that the team writes for its own breaking changes.²²⁷³ Its history also includes a famous break, the rewrite from AngularJS, whose long-term support ended at the end of 2021.⁷⁴
• React follows semantic versioning for stable releases and tries “to minimize the number of major releases”, adding warnings first so that “if your app has no warnings on the latest release, it will be compatible with the next major release”. There is no long-term support window, but the team releases “a backported fix for all major versions that are affected” by a security vulnerability.²³ The churn is in the ecosystem instead, and in newer, lower-level areas: the APIs for building Server Component frameworks are not covered by semantic versioning.³⁸
• Flutter ships a stable release about every three months.²⁴ Its compatibility policy is based on a registry of tests contributed by developers, which no change may break without the team working with their owners, and substantive breaking changes are designed in public first; dart fix applies automated migrations for deprecated APIs.⁷⁵⁷⁶ Its documentation describes no support window for older releases. In 2026 the Material and Cupertino libraries began moving out of the framework into separately released packages.²⁴

Accessibility and search on the web

Because Angular and React produce real HTML, they start with the browser’s built-in accessibility: a <button> is a button to a screen reader, and headings, links and form controls carry their native meaning. Angular’s guidance is to reuse native elements “rather than re-implementing well-supported behaviors”, bind ARIA attributes in templates, and use its CDK and Angular Aria for complex widgets.⁶⁶ React “fully supports building accessible websites, often by using standard HTML techniques”, with all aria-* attributes supported in JSX.⁷⁷ Either can of course still produce inaccessible pages; they simply do not stand in the way.

Flutter on the web paints a canvas, so it builds a parallel tree of DOM elements for assistive technology to read. For performance reasons that tree is off until a screen reader user activates a hidden button, or the app turns it on itself.⁷⁸

Search is where the difference is largest. Google renders JavaScript with a headless Chromium before indexing, but recommends that “server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers”, and notes that “not all bots can run JavaScript”.⁷⁹ Angular renders on the server out of the box, and React does so through frameworks such as Next.js.²¹⁵⁷ Flutter’s own documentation says it “is not suitable for static websites with text-rich flow-based content” and that its output does not align with what search engines need; it suggests keeping landing pages in ordinary HTML. The Flutter team followed that advice for its own websites, which it rebuilt in 2026 with Jaspr, a DOM-based Dart framework.⁶⁸⁰

Mobile and desktop

On devices, the comparison changes sides: Flutter is the native option, and the web frameworks need help.

• Flutter produces Android and iOS apps, desktop apps for Windows, macOS and Linux, and embedded apps, all from one code base and with the same rendering on each.⁴⁵ Its interface is not made of the platform’s own widgets: Material and Cupertino are reimplementations, so a new platform design, such as Apple’s Liquid Glass, has to be reimplemented too.²⁴
• React reaches phones through React Native, which renders to the platform’s own views: “React primitives render to native platform UI”.²⁰ Its New Architecture, the default since version 0.76, replaced the old asynchronous bridge with direct calls through the JavaScript Interface.⁸¹ Versions for Windows and macOS are developed by partners in Microsoft’s GitHub organisation, and React’s documentation recommends Expo as the framework for native apps.⁸²³ A React web app and a React Native app can share logic and skills, but not their UI components, which target different primitives.
• Angular has no mobile runtime of its own. Ionic builds mobile apps from web technology, deploying them with Capacitor or Cordova or as progressive web apps, and integrates with Angular, React and Vue; NativeScript gives JavaScript direct access to platform APIs and has an Angular flavour.⁶⁹⁷⁰

Flutter’s guide for React Native developers says that Flutter “controls each pixel on the screen, which avoids performance problems caused by the need for a JavaScript bridge”.³² That argument was aimed at React Native’s old architecture; the New Architecture’s direct calls were designed to remove exactly that bottleneck, so it is weaker than it was.⁸¹

Teams, hiring and longevity

A framework is also a labour market. In Stack Overflow’s 2026 survey, 41.5 percent of respondents had done extensive work with React in the past year, 16.0 percent with Angular, and 20.6 percent with Next.js; 46.7 percent of React’s users and 42.1 percent of Angular’s wanted to keep using it. Among languages, JavaScript was used by 62.0 percent and TypeScript by 43.8 percent, against 4.9 percent for Dart.²⁵ The 2026 survey did not ask about mobile frameworks; the 2024 survey did, and found Flutter used by 9.4 percent and React Native by 8.4 percent.²⁶

Those figures support some cautious conclusions. React developers are the easiest to find, and so are React libraries and answers. Angular’s community is smaller, though still one developer in six in that survey. Flutter developers need Dart, which few developers use, while both web frameworks use the JavaScript and TypeScript that most front-end developers already know.

Longevity is about stewards as well as users. Angular and Flutter are both Google projects. Angular is used for Google products such as Gemini and Google Analytics, and Google plans to merge it gradually with Wiz, its internal framework for performance-critical apps.⁸³ Google’s 2024 layoffs in the Flutter and Dart teams, and the community fork Flock that followed, show that some developers worry about depending on one company’s priorities.⁸⁴⁸⁵ React moved from Meta to the React Foundation in 2026, hosted by the Linux Foundation and backed by several companies.¹¹

How to choose

Questions to ask first

1. Is it a document or an application? Pages that people read and find through search, such as documentation, blogs, marketing and product pages, want HTML first. Applications that people log into and use for a long time can afford more JavaScript, or an engine.
2. Where must it run? Browser only, or also on phones and desktops? If on devices, does it need the platform’s own look, or a design of its own?
3. Who will build and maintain it, and for how long? A large team over many years benefits from conventions and a single upgrade path; a small team moving fast may prefer to pick its own pieces.
4. What does the team already know? Existing skills and existing code usually outweigh every technical difference in this article.
5. What is the budget for the first load? A shop page opened from a search result and an internal tool opened every morning have very different limits.

A decision chart

Scenarios

When the answer is none of them

Sometimes none of the three is right. For pages whose job is to be read, the authors of web.dev’s guide to rendering “encourage developers to consider server-side rendering or static rendering over a full rehydration approach”, and add that it is fine to “mostly ship HTML with minimal JavaScript”.⁸⁶ A small widget on an otherwise static page is often better written without a framework at all. And for an app that targets one platform and must feel entirely at home there, the platforms’ own toolkits are the default: Apple describes SwiftUI as building apps “across all Apple platforms”, and Google calls Jetpack Compose “Android’s recommended modern toolkit for building native UI”.⁸⁷⁸⁸

Where comparisons mislead

Comparisons of frameworks, including this one, are easy to over-read. Three kinds of evidence are especially slippery.

• Benchmarks measure what they measure. The js-framework-benchmark times table operations in one browser on one machine; it does not measure network loading on a slow phone, a real application’s data, developer productivity or code quality, and Flutter cannot even enter it. Its author warns against reading the development snapshot as an official result.⁵²
• Surveys measure who answers. Developer surveys are self-selected, and their questions change. Stack Overflow’s 2026 survey had 10,281 respondents, against 35,100 answers to the 2024 question on other frameworks, and it did not ask about mobile frameworks, so Flutter appears in it only as a write-in among web frameworks, at 0.2 percent.²⁵²⁶ A reader who compared the two years naively would conclude that Flutter had collapsed. State of JavaScript’s 2025 survey noted that React “tops the list of things front-end developers are struggling with”, but added that this is what “being the dominant framework also means”.⁸⁹
• Popularity among developers is not popularity on the web. The HTTP Archive, which measures real pages across the web, found React on 10 percent of them in 2024, and jQuery on 75 percent of desktop pages.⁵⁵ The most popular of the three among developers runs on one page in ten.
• Toy apps measure fixed costs. As shown above, a counter tells you each tool’s starting weight, not how a real application will perform.

Why it matters

Angular, React and Flutter are three answers to the same problem: keeping a complicated interface in step with changing data without writing every update by hand. Angular answers with a complete, opinionated framework and precise dependency tracking; React with a small, stable core idea and an enormous ecosystem around it; Flutter by owning the entire rendering stack, so that one program looks the same everywhere. Knowing which kind of thing each one is explains most of what they are good at and most of what they cost, and turns “which is best?” into the more useful question of which fits this product, this team and this platform.

References