React vs Angular: diferenças e quando escolher cada um

O React é uma biblioteca JavaScript para construir interfaces de usuário, e o Angular é um framework completo para construir aplicações web. Com o React você escreve componentes como funções que retornam JSX e escolhe ferramentas separadas para roteamento, formulários e dados; com o Angular você escreve classes TypeScript com templates HTML e recebe roteamento, formulários, um cliente HTTP e injeção de dependência prontos. Aqui está o mesmo contador nos dois.

import { useState } from 'react';

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

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

A versão Angular desse componente:

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

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

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

As ideias correspondem uma a uma: o useState(0) do React é o signal(0) do Angular, onClick={...} é (click)="..." e {count} é {{ count() }}. A diferença é onde o código mora: uma função que retorna marcação no React, uma classe mais uma string de template no Angular.

Biblioteca vs framework

Essa é a diferença que motiva quase todas as outras. O React cobre a renderização e o estado dos componentes. Todo o resto é escolha sua:

• Roteamento: React Router, TanStack Router ou as rotas baseadas em arquivos de um framework.
• Busca de dados: fetch em um efeito, TanStack Query ou os loaders e server components de um framework.
• Formulários: inputs controlados simples, form actions do React 19 ou React Hook Form.
• Estado global: context, Zustand, Redux Toolkit, Jotai.

Muitas equipes pulam a maioria dessas escolhas começando por um framework React como o Next.js ou o React Router no modo framework, que junta roteamento, carregamento de dados e renderização no servidor.

O Angular faz essas escolhas por você: @angular/router, formulários reativos e baseados em template, HttpClient, injeção de dependência, uma configuração de testes e a CLI ng, que gera componentes e serviços. Todo projeto Angular tem uma cara parecida, um motivo comum para grandes organizações o escolherem. O custo é uma superfície maior para aprender e menos liberdade para trocar uma peça.

JSX vs templates

Componentes React retornam JSX, que é JavaScript. Condições são && ou um ternário, listas são .map(), e tudo o que você faz em JavaScript dá para fazer na marcação. Os templates do Angular são HTML com sintaxe própria: @if, @for com track, bindings [property], bindings (event) e interpolação {{ }}. Os templates mantêm marcação e lógica visivelmente separadas; o JSX as mantém em um só lugar e dá a você a linguagem inteira. Aqui está uma lista filtrada, a segunda funcionalidade para comparar.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Digite an na caixa e observe o console: a função inteira executa de novo a cada tecla, e visible é simplesmente recalculado. O mesmo componente em Angular, com o template em um arquivo próprio:

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

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

No Angular, computed declara que visible depende de query, então o Angular sabe qual template o lê e recalcula visible só quando query muda. No React não há declaração: o componente executa de novo e recalcula. O key={fruit} no React e o track fruit no Angular fazem o mesmo trabalho, dizendo ao framework qual item da lista é qual.

JavaScript primeiro vs TypeScript primeiro

O React é JavaScript puro com JSX, e o TypeScript é uma opção que você adiciona (npm create vite@latest my-app -- --template react-ts). A maioria dos projetos React novos o adiciona, mas dá para aprender React sem saber tipos. O Angular é feito para TypeScript: decorators, injeção de dependência e o verificador de tipos dos templates pressupõem isso. Se a sua equipe já escreve código tipado, isso não é problema; se você está começando a programar, é mais uma coisa para aprender ao mesmo tempo. A página de React com TypeScript mostra como a tipagem funciona do lado do React.

Fluxo de dados e detecção de mudanças

Os dois passam dados para baixo por inputs (props no React, input() ou @Input() no Angular) e enviam eventos para cima por callbacks (funções passadas como props no React, output() ou @Output() no Angular). A diferença é como cada um percebe uma mudança.

O React trata o estado como fotos imutáveis. Você chama um setter com um novo valor, o React executa de novo a função do componente, compara o novo JSX com o antigo e aplica as diferenças no DOM. Nada é acompanhado automaticamente: a função de renderização é o grafo de dependências. Isso é simples de entender, e o custo é que às vezes você adiciona memo, useMemo ou useCallback (ou deixa o React Compiler adicioná-los) para pular trabalho.

O Angular historicamente usava o Zone.js para detectar qualquer evento assíncrono e então verificava a árvore de componentes em busca de bindings alterados. O Angular moderno está migrando para signals: signal, computed e effect acompanham quais valores cada template lê, então o Angular só verifica os componentes cujos signals mudaram, e versões recentes conseguem rodar sem o Zone.js. Os templates do Angular não executam uma função inteira de novo a cada mudança, como os componentes do React fazem.

No código do dia a dia, os dois parecem mais próximos do que a mecânica sugere: você guarda estado, deriva valores dele, e a tela acompanha.

Gerenciamento de estado

No React, o estado local é useState ou useReducer, o estado compartilhado é elevado para um pai ou colocado em context, e o estado de nível do app muitas vezes mora em uma pequena biblioteca de store. No Angular, o estado local são signals no componente, e o estado compartilhado normalmente mora em um serviço injetado onde for necessário; a injeção de dependência é a resposta embutida do Angular para "como dois componentes distantes compartilham dados". O NgRx existe para equipes que querem uma store no estilo Redux. O React não tem um sistema de injeção de dependência; o context cumpre um papel parecido.

Tabela comparativa

Curva de aprendizado

Com o React se começa mais rápido. Um iniciante que sabe JavaScript consegue construir algo real depois de aprender componentes, props, estado e efeitos, e a página o que é React cobre a ideia inteira em poucos minutos. O aprendizado fica para depois: você precisa escolher um roteador, uma abordagem de busca de dados e uma estratégia de formulários, e códigos React diferentes fazem escolhas diferentes.

O Angular tem um começo mais íngreme: TypeScript, decorators, templates, signals, injeção de dependência, os módulos de roteamento e de formulários, e RxJS em algumas APIs. Depois que você o conhece, porém, todo projeto Angular usa as mesmas peças do mesmo jeito, então passar de um projeto para outro é mais fácil.

Quando escolher cada um

Escolha React quando:

• Você quer um núcleo pequeno e a liberdade de escolher o resto, ou quer um framework como o Next.js para renderização no servidor e rotas baseadas em arquivos.
• Você planeja construir apps mobile também, em que o React Native reaproveita o mesmo modelo de componentes.
• A equipe se sente mais à vontade em JavaScript, ou você está aprendendo desenvolvimento front-end e quer o caminho mais curto até um app funcionando.

Escolha Angular quando:

• Uma equipe grande precisa de uma estrutura padrão em muitos projetos, com menos decisões de arquitetura para discutir.
• Você quer formulários, HTTP, roteamento e injeção de dependência mantidos juntos por uma única equipe e atualizados juntos pela CLI.
• A equipe já escreve TypeScript e gosta de serviços baseados em classes e de uma separação clara entre template e lógica.

Os dois são maduros, muito usados em produção e bons para a carreira. As habilidades se transferem: componentes, fluxo de dados em uma direção, estado derivado e atualizações reativas são as mesmas ideias nos dois.