Histórico e versões

React existe há tempo suficiente para ter passado por algumas eras bem distintas, e conhecer a forma geral desse histórico ajuda você a ler o código que vai encontrar por aí. Um tutorial de 2017 e um de hoje podem ser ambos "React" e mesmo assim parecer bem diferentes. Este capítulo percorre a linha do tempo e explica os dois estilos que você vai encontrar.

Uma breve linha do tempo

React começou no Facebook, onde surgiu da necessidade de manter interfaces grandes e pesadas em dados sincronizadas sem um emaranhado de atualizações manuais do DOM. Foi lançado como open source em 2013, e a ideia no seu centro — descreva a interface para seus dados atuais e deixe React cuidar das atualizações — permanece constante até hoje. Quase tudo mais sobre como você escreve React evoluiu em volta desse núcleo.

Pelos primeiros anos, um componente que precisava lembrar de algo era escrito como uma classe JavaScript. Classes são um recurso JavaScript comum, e React as usava para dar ao componente um lugar para guardar dados que mudam com o tempo, junto com um conjunto de métodos com nomes especiais que React chamaria em certos momentos: quando o componente aparecia na tela, quando atualizava e quando era removido. Esse estilo foi o padrão por um bom tempo, e é por isso que muito do código React que já existe por aí é escrito dessa forma.

A grande mudança veio com hooks, que chegaram no React 16.8 no início de 2019. Um hook é uma função que React oferece e que permite a um componente função simples fazer as coisas que só uma classe podia fazer antes, como lembrar um valor entre renderizações. Escrever um componente ficou muito mais curto, e componentes função rapidamente se tornaram o padrão para código novo. Hooks cobre isso direito mais adiante. O que você precisa levar adiante por enquanto é que hooks são o que tornou o estilo moderno possível.

React continuou evoluindo desde então: React 18 chegou em 2022 e React 19 em 2024, cada um adicionando capacidades e suavizando arestas ásperas. Esses lançamentos importam mais uma vez que você está construindo aplicações reais, e eles aparecem depois no handbook onde são relevantes.

Esse é o arco em linhas gerais. Você não precisa memorizar datas. O aprendizado útil é que React tem um histórico longo, os fundamentos se mantiveram estáveis, e o estilo de escrita se moveu decisivamente para componentes função e hooks.

Dois estilos de React na natureza

Por causa desse histórico, você vai encontrar React escrito em dois estilos notavelmente diferentes.

O estilo mais antigo escreve um componente como uma classe. Seus dados que mudam vivem dentro da classe, e React chama métodos com nomes especiais nela em pontos definidos na vida do componente. Uma grande quantidade de código em produção ainda funciona dessa forma, e muitos tutoriais, posts de blog e respostas do Stack Overflow mais antigos são escritos assim. Ainda funciona e ainda é suportado. É simplesmente o jeito anterior de escrever React.

Como o estilo mais antigo se parece

Este handbook não ensina esse estilo e você não precisa escrevê-lo. Vale a pena conseguir reconhecê-lo, porque você vai encontrá-lo. Uma base de código mais antiga tem componentes que se parecem com algo assim:

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React chama isso uma vez, logo depois que o componente aparece na tela
  }

  render() {
    return <button>Clicado {this.state.count} vezes</button>
  }
}

Três coisas marcam isso: class e extends React.Component no topo, this.state como o lugar onde seus dados que mudam vivem, e nomes de métodos começando com component que React chama automaticamente em momentos definidos.

O estilo moderno escreve um componente como uma função e usa hooks para dar a ele memória e para rodar código quando as coisas mudam. Isso é o que código React novo é escrito, e é o que a documentação oficial agora ensina primeiro.

Este curso ensina React moderno: componentes função e hooks do começo ao fim. Onde você provavelmente vai bater de frente com o equivalente mais antigo baseado em classes, seja em uma base de código no trabalho ou em um tutorial mais velho, vamos sinalizar para que os dois conectem na sua cabeça e nenhum dos dois o surpreenda.

Dois lançamentos depois de hooks valem ser conhecidos pelo nome. React 18, em 2022, trouxe renderização concorrente: React ganhou a habilidade de preparar atualizações em background e interromper trabalho para manter a interface responsiva. Também mudou como uma app inicia, movendo o ponto de entrada para createRoot, que é o que entra uma app nas capacidades mais recentes.

React 19, em 2024, continuou nessa direção. Adicionou Actions para lidar com envios de formulário e estados pendentes, um hook use para ler recursos como promises e context durante a renderização, e permitiu que você passasse ref como uma prop comum em vez de recorrer a forwardRef. Junto com os lançamentos, o React Compiler automatiza memoização: trabalho que desenvolvedores costumavam fazer à mão com useMemo e useCallback pode ser tratado no tempo de compilação.

Hooks deslocaram classes em vez de ficar ao lado delas porque o modelo de classe tornava a lógica com estado difícil de compartilhar. Reutilizar comportamento entre componentes significava envolvê-los em componentes de ordem superior ou passar por render props, ambos aninhavam sua árvore e obscureciam onde a lógica realmente vivia. Hooks deixam você extrair essa lógica para uma função simples, um hook customizado, e chamá-lo de qualquer componente. A história de reuso ficou dramaticamente mais simples. Hooks também contornam this: componentes de classe forçam você a fazer bind de métodos e raciocinar sobre o que this se refere no tempo da chamada, uma fonte recorrente de bugs que componentes função não têm.

O trabalho concorrente no React 18 é uma mudança mais profunda do que o swap de createRoot sugere. Alterou como a renderização propriamente dita se comporta, bem abaixo do nível da API que você chama. React agora pode começar a renderizar uma atualização, pausá-la e retomar ou abandoná-la, o que significa que uma renderização não é mais garantida de rodar do começo ao fim de uma vez. Features como startTransition e carregamento de dados orientado por Suspense se baseiam nisso. É por que createRoot importa além de ser um novo nome de função: optar por ele é o que dá permissão a React para agendar e interromper renderização dessa forma.

A partir daqui o handbook constrói no estilo moderno, e Componentes é onde aquilo começa de verdade: um componente como uma função que retorna um pedaço da sua interface. Antes que nada disso rode, você precisa ter React instalado e rodando na sua própria máquina.

JunoDois estilos, um React Se você encontrar um tutorial onde componentes são escritos como class com this.state e componentDidMount, não entre em pânico e não pense que você está fazendo errado. Esse é o estilo mais antigo de React, e ainda funciona. Este curso usa o estilo mais recente, componentes função com hooks, e vou apontar os equivalentes mais antigos quando passarmos por eles para que nada o pegue de surpresa.

JunoDois estilos, um React Mapa rápido para ler código real: classes com this.state e métodos de ciclo de vida são o estilo pré-hooks, funções com useState e useEffect são React moderno. Você verá ambos no trabalho. Construímos no estilo moderno aqui, e vou sinalizar o equivalente baseado em classe quando é a coisa que você realmente vai encontrar.

JunoDois estilos, um React Os lançamentos para se manter em mente: hooks em 16.8 mudaram o estilo padrão de autoria e consertaram reuso de lógica sem HOCs ou render props; 18 introduziu renderização concorrente e moveu o ponto de entrada para createRoot; 19 adicionou Actions, o hook use e ref como uma prop. Hooks e concorrência são as duas mudanças que alcançam a semântica de renderização, e elas são as que valem entender no nível de mecanismo.

Próximo: Configurar um projeto React, onde você vai colocar React rodando na sua própria máquina.